Border cho table
Mặc định của table là các khoảng cách giữa các hàng và cột.
Chúng ta có thể sử dụng border trong css để điều chỉnh cho đẹp và dễ nhìn hơn.
Table – với border none
Đây là cách tận dụng các khoảng cách của các phần tử table để tạo border, khi này phần nền bên dưới sẽ là border cho table.
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: none;
width: 100%;
}
.tableStyle th {
background-color: #cad8fa;
padding: 5px;
}
.tableStyle td {
background-color: #f0e7da;
padding: 5px;
}
</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 – với border 1px
Tạo một border duy nhất bao quanh table, phần khoảng cách còn lại được xem như là phần viền ngăn cách các phần tử.
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;
width: 100%;
}
.tableStyle th {
background-color: #cad8fa;
padding: 5px;
}
.tableStyle td {
background-color: #f0e7da;
padding: 5px;
}
</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 cho các phần tử của table (table cell)
Mỗi phần tử sẽ được bao bằng một border riêng biệt, tạo sự tách biệt giữa các phần tử.
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;
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>