Table với border các kiểu khác nhau
Đây là nhiều dạng table mà chúng ta thường gặp, nếu không biết cách điều chỉnh border hợp lý thì những dạng này thật sự là một rắc rối, tuy nhiên chỉ vài dòng CSS sử lý spacing và border phù hợp, chúng ta có thể tạo được table hợp lý.
Table – border với border-collapse
Border cho các phần tử của table (table cell)
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: 1px solid #ccc;
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border: 1px solid #ccc;
padding: 5px;
}
.tableStyle th {
background-color: #cad8fa;
}
.tableStyle td {
background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
<th>th05</th>
</tr>
<tr>
<td>td01</td>
<td>td02</td>
<td>td03</td>
<td>td04</td>
<td>td05</td>
</tr>
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
<td>td14</td>
<td>td15</td>
</tr>
<tr>
<td>td21</td>
<td>td22</td>
<td>td23</td>
<td>td24</td>
<td>td25</td>
</tr>
<tr>
<td>td31</td>
<td>td32</td>
<td>td33</td>
<td>td34</td>
<td>td35</td>
</tr>
<tr>
<td>td41</td>
<td>td42</td>
<td>td43</td>
<td>td44</td>
<td>td45</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Table – border top và bottom
Border top và bottom cho các phần tử của table (table cell)
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: 1px solid #ccc;
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.tableStyle th {
background-color: #cad8fa;
}
.tableStyle td {
background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
<th>th05</th>
</tr>
<tr>
<td>td01</td>
<td>td02</td>
<td>td03</td>
<td>td04</td>
<td>td05</td>
</tr>
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
<td>td14</td>
<td>td15</td>
</tr>
<tr>
<td>td21</td>
<td>td22</td>
<td>td23</td>
<td>td24</td>
<td>td25</td>
</tr>
<tr>
<td>td31</td>
<td>td32</td>
<td>td33</td>
<td>td34</td>
<td>td35</td>
</tr>
<tr>
<td>td41</td>
<td>td42</td>
<td>td43</td>
<td>td44</td>
<td>td45</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Border top và bottom cho các phần tử của table (table cell) với màu trắ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-bottom: 1px solid #fff;
border-top: 1px solid #fff;
padding: 5px;
text-align: center;
}
.tableStyle th {
background-color: #cad8fa;
}
.tableStyle td {
background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
<th>th05</th>
</tr>
<tr>
<td>td01</td>
<td>td02</td>
<td>td03</td>
<td>td04</td>
<td>td05</td>
</tr>
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
<td>td14</td>
<td>td15</td>
</tr>
<tr>
<td>td21</td>
<td>td22</td>
<td>td23</td>
<td>td24</td>
<td>td25</td>
</tr>
<tr>
<td>td31</td>
<td>td32</td>
<td>td33</td>
<td>td34</td>
<td>td35</td>
</tr>
<tr>
<td>td41</td>
<td>td42</td>
<td>td43</td>
<td>td44</td>
<td>td45</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Table – border left và right
Border left và right cho các phần tử của table (table cell)
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: 1px solid #ccc;
border-collapse: collapse;
width: 100%;
}
.tableStyle th,
.tableStyle td {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 5px;
text-align: center;
}
.tableStyle th {
background-color: #cad8fa;
}
.tableStyle td {
background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
<th>th05</th>
</tr>
<tr>
<td>td01</td>
<td>td02</td>
<td>td03</td>
<td>td04</td>
<td>td05</td>
</tr>
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
<td>td14</td>
<td>td15</td>
</tr>
<tr>
<td>td21</td>
<td>td22</td>
<td>td23</td>
<td>td24</td>
<td>td25</td>
</tr>
<tr>
<td>td31</td>
<td>td32</td>
<td>td33</td>
<td>td34</td>
<td>td35</td>
</tr>
<tr>
<td>td41</td>
<td>td42</td>
<td>td43</td>
<td>td44</td>
<td>td45</td>
</tr>
</table>
</body>
</html>
Hiển thị trình duyệt:
Border left và right cho các phần tử của table (table cell) với màu trắ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-left: 1px solid #fff;
border-right: 1px solid #fff;
padding: 5px;
text-align: center;
}
.tableStyle th {
background-color: #cad8fa;
}
.tableStyle td {
background-color: #f0e7da;
}
</style>
</head>
<body>
<table class="tableStyle">
<tr>
<th>th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
<th>th05</th>
</tr>
<tr>
<td>td01</td>
<td>td02</td>
<td>td03</td>
<td>td04</td>
<td>td05</td>
</tr>
<tr>
<td>td11</td>
<td>td12</td>
<td>td13</td>
<td>td14</td>
<td>td15</td>
</tr>
<tr>
<td>td21</td>
<td>td22</td>
<td>td23</td>
<td>td24</td>
<td>td25</td>
</tr>
<tr>
<td>td31</td>
<td>td32</td>
<td>td33</td>
<td>td34</td>
<td>td35</td>
</tr>
<tr>
<td>td41</td>
<td>td42</td>
<td>td43</td>
<td>td44</td>
<td>td45</td>
</tr>
</table>
</body>
</html>