9.1 Sử dụng thuộc tính
Định dạng bảng trong HTML có thể thực hiện theo nhiều cách khác nhau. Một trong số đó là sử dụng thuộc tính trực tiếp trong thẻ bảng và các phần tử của nó. Mặc dù các lập trình viên web hiện đại thường thích sử dụng CSS để định dạng, nhưng hiểu về thuộc tính HTML cũng hữu ích cho việc định dạng cơ bản.
Các thuộc tính chính của bảng
Thuộc tính border
Xác định độ dày của đường viền bảng. Thường giá trị được chỉ định bằng pixel.
<table border="1">
<tr>
<th>Tên</th>
<th>Đánh giá</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria </td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
Thuộc tính cellpadding:
Xác định phần đệm bên trong của các ô (phần đệm bên trong các ô từ biên của nó).
<table cellpadding="10">
<tr>
<th>Tên</th>
<th>Đánh giá</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
Thuộc tính cellspacing:
Xác định khoảng cách giữa các ô.
<table cellspacing="5">
<tr>
<th>Tên</th>
<th>Đánh giá</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
Thuộc tính width và height:
Xác định chiều rộng và chiều cao của bảng. Các thuộc tính này cũng có thể sử dụng trong thẻ <td> và <th> để thiết lập kích thước của các ô.
<table style="text-align: left;" width="100%" height="200">
<tr>
<th width="50%">Tên</th>
<th width="25%">Dự án</th>
<th width="25%">Thành phố</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>Paris</td>
</tr>
</table>
Thuộc tính align:
Xác định canh chỉnh bảng trên trang (left, right, center).
<table align="center">
<tr>
<th>Tên</th>
<th>Đánh giá</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
Thuộc tính bgcolor:
Xác định màu nền của bảng hoặc ô.
<table bgcolor="#f0f0f0">
<tr>
<th>Tên</th>
<th>Đánh giá</th>
</tr>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</table>
9.2 Thuộc tính cho ô bảng
Thuộc tính cho ô bảng
Thuộc tính colspan:
Gộp ô theo chiều ngang.
<td colspan="2">Ô gộp</td>
Thuộc tính rowspan:
Gộp ô theo chiều dọc.
<td rowspan="2">Ô gộp</td>
Thuộc tính align:
Xác định canh chỉnh ngang của nội dung ô (left, right, center).
<td align="center">Nội dung căn giữa</td>
Thuộc tính valign:
Xác định canh chỉnh dọc của nội dung ô (top, middle, bottom).
<td valign="top">Nội dung căn trên</td>
Thuộc tính bgcolor:
Xác định màu nền cho ô.
<td bgcolor="#ffcc00">Nền màu</td>
9.3 Ví dụ đầy đủ
Ví dụ đầy đủ về định dạng bảng với các thuộc tính:
<table border="1" cellpadding="10" cellspacing="5" width="80%" align="center" bgcolor="#e0e0e0">
<caption>Danh sách sinh viên và điểm số của họ</caption>
<thead bgcolor="#c0c0c0">
<tr>
<th align="left">Tên</th>
<th align="center">Tuổi</th>
<th align="right">Thành phố</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td align="center">30</td>
<td align="right">London</td>
</tr>
<tr>
<td colspan="2" align="center">Maria và Peter</td>
<td align="right">Liverpool</td>
</tr>
<tr>
<td rowspan="2" valign="middle">Anna</td>
<td>25</td>
<td>Manchester</td>
</tr>
<tr>
<td>27</td>
<td>Leeds</td>
</tr>
</tbody>
<tfoot>
<td colspan="3" align="center">Kết thúc bảng</td>
</tfoot>
</table>
Giải thích ví dụ
border="1": cài đặt viền bảng với độ dày 1 pixelcellpadding="10": cài đặt đệm bên trong 10 pixel cho tất cả các ô bảngcellspacing="5": cài đặt khoảng cách 5 pixel giữa các ô bảngwidth="80%": cài đặt chiều rộng bảng là 80% so với chiều rộng của phần tử chaalign="center": căn giữa bảng trên trangbgcolor="#e0e0e0": cài đặt màu nền cho bảng<caption>: thêm tiêu đề cho bảng-
<thead>và<tbody>: nhóm tiêu đề và thân bảng. Màu nền cho tiêu đề được cài đặt vớibgcolor="#c0c0c0" <th>và<td>: dùng để định nghĩa các ô tiêu đề và dữ liệu<align>và<valign>: xác định canh chỉnh ngang và dọc của nội dung ô<colspan>và<rowspan>: gộp ô theo chiều ngang và dọc
GO TO FULL VERSION