Các dạng table free style
Giới thiệu các bạn thêm nhiều dạng table khác nhau.
Nhiều table thiết kế không gò bó với các border, được dùng nhiều cho các trang có width mở, có thể là dạng responsive hay trang có width rộng.
Table với tiêu đề chính nằm bên trái
Kỹ thuật này áp dụng khá đơn giản, chỉ sử dụng border-right cho th là được.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
padding: 10px;
text-align: left;
}
.tableStyle th {
border-right: 3px solid #ccc;
text-align: right;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>Trình duyệt</th>
<td>Tháng một</td>
<td>Tháng hai</td>
<td>Tháng ba</td>
<td>Tháng tư</td>
<td>Tháng năm</td>
</tr>
<tr>
<th>Chrome</th>
<td>33,3%</td>
<td>33,2%</td>
<td>33,7%</td>
<td>35,3%</td>
<td>36,8%</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td>29,1%</td>
<td>28,2%</td>
<td>28,0%</td>
<td>26,4%</td>
<td>24,9%</td>
</tr>
<tr>
<th>Firefox</th>
<td>20,7%</td>
<td>20,5%</td>
<td>20,3%</td>
<td>20,1%</td>
<td>19,5%</td>
</tr>
<tr>
<th>Safari</th>
<td>11,5%</td>
<td>12,0%</td>
<td>11,9%</td>
<td>11,5%</td>
<td>11,4%</td>
</tr>
<tr>
<th>Opera</th>
<td>1,7%</td>
<td>1,8%</td>
<td>1,8%</td>
<td>1,7%</td>
<td>1,6%</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Thêm một vài border top và bottom để định dạng table được thêm đẹp hơn.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.tableStyle tr.tHead th {
border-bottom: 3px solid #fcd5d5;
border-top: none;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr class="tHead">
<th>Trình duyệt</th>
<th>Tháng một</th>
<th>Tháng hai</th>
<th>Tháng ba</th>
<th>Tháng tư</th>
<th>Tháng năm</th>
</tr>
<tr>
<th>Chrome</th>
<td>33,3%</td>
<td>33,2%</td>
<td>33,7%</td>
<td>35,3%</td>
<td>36,8%</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td>29,1%</td>
<td>28,2%</td>
<td>28,0%</td>
<td>26,4%</td>
<td>24,9%</td>
</tr>
<tr>
<th>Firefox</th>
<td>20,7%</td>
<td>20,5%</td>
<td>20,3%</td>
<td>20,1%</td>
<td>19,5%</td>
</tr>
<tr>
<th>Safari</th>
<td>11,5%</td>
<td>12,0%</td>
<td>11,9%</td>
<td>11,5%</td>
<td>11,4%</td>
</tr>
<tr>
<th>Opera</th>
<td>1,7%</td>
<td>1,8%</td>
<td>1,8%</td>
<td>1,7%</td>
<td>1,6%</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Có thể sử dụng thêm text-align và border để thêm nhiều định dạng khác nhau.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.tableStyle th {
border-right: 1px solid #ccc;
text-align: right;
}
.tableStyle tr.tHead th {
border-bottom: 3px solid #fcd5d5;
border-right: none;
border-top: none;
text-align: left;
}
.tableStyle tr.tHead th.hFirst {
border-right: 1px solid #ccc;
text-align: right;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr class="tHead">
<th class="hFirst">Trình duyệt</th>
<th>Tháng một</th>
<th>Tháng hai</th>
<th>Tháng ba</th>
<th>Tháng tư</th>
<th>Tháng năm</th>
</tr>
<tr>
<th>Chrome</th>
<td>33,3%</td>
<td>33,2%</td>
<td>33,7%</td>
<td>35,3%</td>
<td>36,8%</td>
</tr>
<tr>
<th>Internet Explorer</th>
<td>29,1%</td>
<td>28,2%</td>
<td>28,0%</td>
<td>26,4%</td>
<td>24,9%</td>
</tr>
<tr>
<th>Firefox</th>
<td>20,7%</td>
<td>20,5%</td>
<td>20,3%</td>
<td>20,1%</td>
<td>19,5%</td>
</tr>
<tr>
<th>Safari</th>
<td>11,5%</td>
<td>12,0%</td>
<td>11,9%</td>
<td>11,5%</td>
<td>11,4%</td>
</tr>
<tr>
<th>Opera</th>
<td>1,7%</td>
<td>1,8%</td>
<td>1,8%</td>
<td>1,7%</td>
<td>1,6%</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Sử dụng background odd, even đễ dễ dàng phân biệt giữa các hàng.
Html viết:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<style>
* { /* reset lại margin và padding cho các tag */
margin: 0;
padding: 0;
}
.tableStyle {
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border-top: 1px solid #ccc;
padding: 10px;
text-align: left;
}
.tableStyle th {
border-right: 1px solid #ccc;
text-align: right;
}
.tableStyle tr.tHead th {
border-bottom: 3px solid #fcd5d5;
border-right: none;
border-top: none;
text-align: left;
}
.tableStyle tr.tHead th.hFirst {
border-right: 1px solid #ccc;
text-align: right;
}
.tableStyle .even td {
background-color: #fbede8;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr class="tHead">
<th class="hFirst">Trình duyệt</th>
<th>Tháng một</th>
<th>Tháng hai</th>
<th>Tháng ba</th>
<th>Tháng tư</th>
<th>Tháng năm</th>
</tr>
<tr>
<th>Chrome</th>
<td>33,3%</td>
<td>33,2%</td>
<td>33,7%</td>
<td>35,3%</td>
<td>36,8%</td>
</tr>
<tr class="even">
<th>Internet Explorer</th>
<td>29,1%</td>
<td>28,2%</td>
<td>28,0%</td>
<td>26,4%</td>
<td>24,9%</td>
</tr>
<tr>
<th>Firefox</th>
<td>20,7%</td>
<td>20,5%</td>
<td>20,3%</td>
<td>20,1%</td>
<td>19,5%</td>
</tr>
<tr class="even">
<th>Safari</th>
<td>11,5%</td>
<td>12,0%</td>
<td>11,9%</td>
<td>11,5%</td>
<td>11,4%</td>
</tr>
<tr>
<th>Opera</th>
<td>1,7%</td>
<td>1,8%</td>
<td>1,8%</td>
<td>1,7%</td>
<td>1,6%</td>
</tr>
</table>
</body>
</html>