Bài 05: Thẻ Table trong HTML

Chắc các bạn đã từng sử dụng Excel thì bạn thấy rằng dữ liệu trong Excel được bố trí trong các ô của một bảng. Các ô được tạo ra bởi các hàng và các cột. Và dữ liệu được chúa trong các ô(cell) được tạo bởi các hàng và các cột.

Cũng tương tự như Excel. HTML cũng cho phép chúng ta trình bày dữ liệu thành dạng bảng Table. Một table được tạo ra bởi các hàng(Row) và các cột(Column). Điểm giao nhau giữa một hàng và một cột gọi là ô(Cell).

1. Cấu trúc bảng trong HTML

Bảng được trình bày theo cấu trúc sau: 

• Tiêu đề (header)
• Nội dung chính - phần dữ liệu (body)
• Phần chân của bảng ( footer)

Ví dụ:Cấu trúc của một bảng tiêu chuẩn.

<table border="1" cellspacing="2" cellpadding="2">
  <thead>  
    <tr>  
      <th>Tiêu đề cột 1</th>
      <th>Tiêu đề cột 2</th>
      <th>Tiêu đề cột 3</th>
    </tr>  
  </thead>  
  <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>  
  <tfoot>
  	<tr>
    	<td>Chân cột 1</td>
        <td>Chân cột 2</td>
        <td>Chân cột 3</td>
    </tr>
  </tfoot>
</table>

Xem kết quả

Trong đó:

• <table> bắt đầu một bảng và </table> kết thúc một bảng.
• <thead> bắt đầu hàng thiêu đề và </thead> kết thúc hàng tiêu đề.
• <th> bắt đầu một cột tiêu đề và </th> kết thúc một cột tiêu đề
• <tr> bắt đàu một hàng và </tr> kết thúc một hàng.
• <td> bắt đầu nột cột và </td> kết thúc một cột.
• <tfoot> bắt đầu hàng chân bảng và </tfoot> kết thúc hàng chân bảng.
• Thuộc tính border="n" là khai báo đường viền của table
• Thuộc tính cellspacing="n" là khai báo khoảng cách giữa viền trên và viền dưới của đường viền
• Thuộc tính cellpadding="n" là khai báo khoảng cách giữa nội dung trong ô so với đường viền

2. Thuộc tính colspan và rowspan của bảng.

<TD COLSPAN = n </TD> với n là số cột mà ô đó trải qua

<TD ROWSPAN = n </TD> với n là số hàng mà ô đó trải qua

2.1. colspan là thuộc tính nối hai hay nhiều ô với nhau thành một ô tính theo chiều ngang.

<table border="1" cellspacing="2" cellpadding="2">
  <tr> 
    <td colspan="2">Hàng 1 cột 1 và 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>

Xem kết quả

2.2. rowspan là thuộc tính nối hai hay nhiều ô với nhau thành một ô theo chiều dọc. 

<table border="1" cellspacing="2" cellpadding="2">
  <tr> 
    <td rowspan="2">Hàng 1 và 2 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 2</td>
    <td>Hàng 2 cột 3</td>
  </tr>
</table>

Xem kết quả

3. Thuộc tính align.

Thuộc tính align là thuộc tính được sử dụng để căn chỉnh nội dung trong mỗi ô(cell) theo chiều ngang. Trong HTML thuộc tính align có một số giá trị sau.

Ví dụ:

<table border="1" cellspacing="2" cellpadding="2" awidth="100%">
  <tr> 
    <td align="left" awidth="25%" awidth="25%" awidth="25%">Canh trái</td>
    <td align="center" awidth="25%" awidth="25%" awidth="25%">Canh giữa</td>
    <td align="justify" awidth="25%" awidth="25%">Canh đều 2 bên</td>
    <td align="right" awidth="25%">Canh phải</td>
  </tr>
</table>

Xem kết quả

4. Thuộc tính valign.

Thuộc tính valign là thuộc tính được sử dụng để căn chỉnh nội dung trong mỗi ô(cell) theo chiều dọc. Trong HTML thuộc tính align có một số giá trị sau.

Ví dụ:

<table border="1" cellspacing="2" cellpadding="2">
  <tr> 
    <td valign="top" align="left" height="40px">Canh lên trên</td>
    <td valign="bottom" height="40px">Canh xuống dưới</td>
    <td valign="baseline" height="40px">Canh cơ bản</td>
    <td valign="middle" height="40px">Canh ở giữa</td>
  </tr>
</table>

Xem kết quả

5. Tổng kết

Như vậy trong bài này mình đã giới thiệu đến các thẻ HTML liên quan đến table. Điều lưu ý thứ nhất ở bài này là cách gộp nhiều ô với nhau bằng hai thẻ colspan và rowspan.