Các bảng trong HTML được định nghĩa như sau:Định nghĩa 1 bảng bởi cặp thẻ
<table></table>
Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.
Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>
Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:
<table>
<tr>
<td>Ô thứ nhất</td>
<td>Ô thứ 2</td>
<td>Ô thứ 3</td>
</tr>
</table>
Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:
<table>
<tr>
<td>Ô thứ nhất dòng 1</td>
<td>Ô thứ 2 dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòngnào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Đểkhắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.Thuộc tính colspan sẽ chỉ định sốlượng các ô được gộp vào nhau trên một hàng.
Chẳng hạn:
<table>
<tr>
<td colspan = "2" >Chập ô thứ nhất và ô thứ 2 của dòng 1</td>
<td>Ô thứ 3 dòng 1</td>
</tr>
<tr>
<td>Ô thứ nhất dòng 2</td>
<td>Ô thứ 2 dòng 2</td>
<td>Ô thứ 3 dòng 2</td>
</tr>
</table>
Một số thuộc tính có liên quan:
Thẻ Table:
- border: Xác định độ dày của khung bao quanh bảng
- bordercolor: Màu của khung baoquanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.
- cellspacing: Xác định khoảng cách giữa các ô trong bảng.
- width: Xác định độ rộng của bảng
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng
- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).
Thẻ <tr>(dòng),<th>(cột), thẻ <th> thì ít dùng, mọi người thường làm theo kiều, trong bảngcó dòng, trong dòng có ô, nhìn nóđỡ rối hơn
Thẻ <td>(ô)
- width: Độ rộng của ô
- height: Chiều cao của ô
- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm1 (trên cùng 1 dòng)
- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm1 (trên cùng 1 cột).
- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô
- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).
Ví dụ:
Mã nguồn:[Chọn]
<table border="1">
<tr>
<th>Cột 1</th>
<th>Cột 2</th>
<th>Cột 3</th>
</tr>
<tr>
<td rowspan="2">Dòng 1 Ô 1</td>
<td>Dòng 1 Ô 2</td>
<td>Dòng 1 Ô 3</td>
</tr>
<tr>
<td>Dòng 2 Ô 2</td>
<td>Dòng 2 Ô 3</td>
</tr>
<tr>
<td colspan="3">Dòng 3 Ô 1</td>
</tr>
</table> Kết quả:
Cột 1
Cột 2
Cột 3
Dòng 1 Ô 1
Dòng 1 Ô 2
Dòng 1 Ô 3
Dòng 2 Ô 2
Dòng 2 Ô 3
Dòng 3 Ô 1
Bảng trên thuộc loại hơi rắc rối, một cấu trúc đơn giản hơn nhiều:
Mã nguồn:[Chọn]
<table>
<tr>
<td>Ô 1</td>
<td>Ô 2</td>
</tr>
<tr>
<td>Ô 3</td>
<td>Ô 4</td>
</tr>
</table>
Kết quả:
Ô 1 Ô 2
Ô 3 Ô 4
Các bạn hãy thử làm một ví dụ cho mình nha! Table - một yếu tố rất quan trong trong các Website đẹp. Tablecho phép bạn có một sự chính xác đến từng pixel trong bố cục của Homepage. Với Table bạn có thể trang trí vàbố cục trang web của mình như một tờ báo với nhiều cột khác nhau. Table làm cho trang web của bạn có một layout sinh động hơn. Trang này chỉ đề cập tới những cái cơ bản nhất của Table.
Cặp TAG <table></table> tạo ra một Table. Như bạn biết, một Table được tạo ta từ nhiều dòng và mỗi dòng lại có thể chứa nhiều ô. Mỗi cặp TAG <tr></tr> tạo ra một dòng, trong dòng ấy bạn có thể sử dụng nhiều cặp TAG <td></td> để có nhiềuô. Cũng như <p>, <tr> và <td> thực ra là mộtTAG đơn, không cần đến </tr> và </td> nhưng nếu cẩn thận, ta vẫn nên dùng nó như một cặp TAG.
HTML Code của bảng trên được viết như sau:
Code:
<table border="1" bordercolor="red" width="80%" align="center" cellpadding="10" cellspacing="5" bgcolor="gray">
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 2</td>
<td width="34%" bgcolor="#C0C0C0" align="left">Dòng 1 - ô 3</td>
</tr>
<tr>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 1</td>
<td width="33%" bgcolor="#C0C0C0" align="left">Dòng 2 - ô 2</td>
<td width="34%" bgcolor="#feedd1" align="left">Dòng 2 - ô 3</td>
</tr>
</table><table width="100%"> cho biết chiều rộng của table này là 100%, consố này không có một giá trị cố định, nó sẽ thay đổi theo mức rộng của màn ảnh của người đến xem, như vậy người xem không phải scroll ngang. Nhưng khi bạn dùng một giá trị cố định, chẳng hạn: width="800", Table này sẽ luôn luôn rộng chừng ấy pixel, bất kể màn ảnh là 800 hay 1024 pixels.
<td width=" 33% "> cho biết, ô đó chiếm 33% chiều rộng của dòng.
<table align="center"> hướng bảng vào trungtâm của trang web, <td align= "left"> địnhhướng toàn bộ nội dung của một ô. align có thể mang các giá trịsau: "left" (gía trị mặc định - không cần viết cũng được), "center" (trung tâm), "right" (phải)
bgcolor có thể sử dụng cho trang web ( <body> ), toàn bộ table( <table> ) hoặc từng ô ( <td> )
border="1" bordercolor="red" có nghĩa: bảng có khung với độ dày 1, màu đỏ
Bạn có thể định khoảng cách giữa nội dung và khung trong một ô bằng cellpadding, cellpadding="10" có nghĩa là text cách khung 10 pixels. Tương tự như vậy với khoảng cách giữa các ô trong bảng (cellpadding): cellspacing="5" có nghĩa là các ô của table cách nhau 5 pixels
Trong table trên, bạnthấy các ô có chiều caovà chiều rộng khác nhau, chính xác hơn làô bên trái, phía dưới rộng bằng 2 ô trên, ô bên phải lại cao bằng hai ô bên trái nó. Ðiềuđó được thực hiện bởi colspan và rowspan
Code:
<table border="1" cellpadding="10" bordercolor="#FF0000" width="80%" cellspacing="5">
<tr>
<td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 1</td>
<td width="33%" valign="top" bgcolor="#E8E8E8">Dòng 1 - ô 2</td>
<td width="34%" valign="top" bgcolor="#feedd1" rowspan="2">
<table width="100%" cellpadding="5" cellspacing="5" border="0" bgcolor="white">
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
<tr>
<td width="50%" bgcolor="#e8e8e8">Text</td>
<td width="50%" bgcolor="#e8e8e8">Text</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="66%" valign="top" bgcolor="#ffcc99" colspan="2">Dòng 2 - 1 ô</td>
</tr>
</table>
Và đặc biệt nữa là trong ô bên phải, bạn lại thấy một table nữa có hai dòng, mỗi dònghai ô. Như vậy, bạn có thể lồng một table trong một table khác.
Cũng còn rất nhiều thủ thuật trình bày nữa nhưng tôi nghĩ, nếu sử dụng những kỹthuật trên cùng với một chút sáng tạo, bạn cũng đã đạt được rất nhiều rồi. [và đây là 1 trang web được xây dựng bằng bố cục table]
