Bài hôm nay mình sẽ giới thiệu đến các bạn các thẻ HTML định dạng Table thông dụng hiện nay. Bài học nằm trong Serie học HTML căn bản. Trong mỗi Table chúng ta thường thấy có 2 thành phần chính đó là hàng và cột. Trong mỗi hàng và cột sẽ có những thuộc tính và các định dạng khác nhau. Bài hôm nay chúng ta sẽ cùng khám phá nhé.
1. Các thẻ HTML định dạng Table căn bản
Một table được tạo thành từ các thẻ table, tr, td, th
<pre class="lang:xhtml decode:true crayon-selected"><body>
<table border="2" cellspacing="5" cellpadding="10">
<caption> Table </caption>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
<th>Tiêu đề 3</th>
</tr>
<tr>
<td>Hàng 1 cột 1</td>
<td>Hàng 1 cột 2</td>
<td>Hàng 1 cột 3</td>
</tr>
<tr>
<td>Hàng 2 cột 1</td>
<td>Hàng 2 cột 2</td>
<td>Hàng 2 cột 3</td>
</tr>
</table>
</body></pre>
Trong đó:
- Thuộc tính border là đường viền của Table
- Cellspacing là khoảng cách giữa các ô với nhau
- Cellpadding là khoảng cách từ chữ trong ô đến đường viền của ô
- Caption là tiêu đề của Table
- tr là 1 dòng trong Table
- td là 1 ô dữ liệu trong Table
- th là 1 ô tiêu đề trong Table
Kết quả :
2. Thuộc tính colspan và rowspan trong Table
Thông thường không phải lúc nào 1 Table cũng đơn giản như trên, tùy theo nhu cầu của từng người mà định dạng Table sẽ khác nhau. Để xử lý vấn đề đó chúng ta có 2 thuộc tính là colspan và rowspan.
Thuộc tính colspan
Dùng để nối hai hoặc nhiều cột với nhau trên 1 dòng tính từ ô trên cùng và đầu tiên bên tay trái đi tới phía trước.
Cách xử lý:
<pre class="lang:xhtml decode:true"><body>
<table border="2" cellspacing="5" cellpadding="10">
<caption> Table </caption>
<tr>
<th colspan="2">Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
<tr>
<td>Hàng 1 cột 1</td>
<td>Hàng 1 cột 2</td>
<td>Hàng 1 cột 3</td>
</tr>
<tr>
<td>Hàng 2 cột 1</td>
<td>Hàng 2 cột 2</td>
<td>Hàng 2 cột 3</td>
</tr>
</table>
</body></pre>
Thuộc tính rowspan
Dùng để nối hai hoặc nhiều cột với nhau trên 1 dòng tính từ ô trên cùng và đầu tiên bên tay trái đi xuống phía dưới. 
Cách xử lý:
<pre class="lang:xhtml decode:true"><body>
<table border="2" cellspacing="5" cellpadding="10">
<caption> Table </caption>
<tr>
<th rowspan="2">Tiêu đề 1</th>
<th>Tiêu đề 2</th>
<th>Tiêu đề 3</th>
</tr>
<tr>
<td>Hàng 1 cột 1</td>
<td>Hàng 1 cột 2</td>
</tr>
<tr>
<td>Hàng 2 cột 1</td>
<td>Hàng 2 cột 2</td>
<td>Hàng 2 cột 3</td>
</tr>
</table>
</body></pre>
Lưu ý : Ở 2 thuộc tính này khi sử dụng colspan tức là ô đó sẽ chiếm vị trí của ô bên cạnh còn rowspan tức là ô đó sẽ chiếm vị trí của ô bên dưới. Vì vậy bạn phải xóa bớt đi một ô trong dòng đó như ví dụ bên trên.
3. Nhóm thẻ thead – tbody – tfood
Giống như là bố cục của một trang web thông thường bao gồm header, body và footer thì Table cũng có bố cục tương tự với nhóm thẻ thead – tbody – tfood. 
<pre class="lang:xhtml decode:true "><body>
<table border="2" cellspacing="5" cellpadding="10">
<thead>
<tr>
<td>
Họ Tên
</td>
<td>
Email
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Nguyenloi1368
</td>
<td>
[email protected]
</td>
</tr>
<tr>
<td>
Nguyenloi
</td>
<td>
Blogloi.com
</td>
</tr>
</tbody>
<tfood>
<tr>
<td>
Họ Tên
</td>
<td>
Email
</td>
</tr>
</tfood>
</table>
</body>
</pre>
Lời kết : Kết thúc bài hôm nay bạn đã có thể nắm được các thẻ HTML định dạng Table căn bản thường dùng, bây giờ thì bạn đã có thể tạo ra 1 trang web đơn giản dựa trên bố cục của Table và các kiến thức đã học từ những bài trước một cách nhanh chóng rồi nhé.
Chúc bạn thành công!
Những bài bạn nên xem:
- HTML là gì? Bố cục HTML của một trang web
- Các thẻ HTML khai báo thông tin web căn bản
- Các thẻ HTML định dạng văn bản
- Các thẻ HTML định dạng danh sách (list)
- Cách dùng thẻ a để tạo liên kết trong HTML
- Các thẻ HTML định dạng hình ảnh và video
