Bài 05: Thẻ Table trong HTML

HTML - CSS 01/08/2015 07:00 710
Đôi lúc trong một trang web chúng ta cần trình bày dữ liệu theo dòng và theo cột theo một format nhất định nào đó như danh sách chi tiết các sản phẩm, danh sách các thành viên, thống kê ngân sách thì thẻ table là một giải pháp tốt đáp ứng yêu cầu đó.

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> <!-- Bắt đầu tiêu đề cho bảng -->
    <tr> <!-- Bắt đầu một hàng -->
      <th>Tiêu đề cột 1</th>
      <th>Tiêu đề cột 2</th>
      <th>Tiêu đề cột 3</th>
    </tr> <!-- Kết thúc một hàng -->
  </thead> <!-- Kết thúc tiêu đề cho bảng -->
  <tr> <!-- Bắt đầu một hàng -->
    <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> <!-- Kết thúc một hàng -->
  <tr><!-- Bắt đầu một hàng -->
    <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> <!-- Kết thúc tiêu đề cho bảng -->
  <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.

Giá trị Align Miêu tả
left Nội dung sẽ được căn chỉnh về phía trái
right Nội dung sẽ được căn chỉnh về phía phải
center Nội dung sẽ được căn chỉnh ra giữa
justify Nội dung sẽ được căn chỉnh đều ở hai bên

Ví dụ:

<table border="1" cellspacing="2" cellpadding="2" width="100%">
  <tr> 
    <td align="left" width="25%" width="25%" width="25%">Canh trái</td>
    <td align="center" width="25%" width="25%" width="25%">Canh giữa</td>
    <td align="justify" width="25%" width="25%">Canh đều 2 bên</td>
    <td align="right" width="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.

Giá trị Align Miêu tả
top Nội dung sẽ được căn chỉnh lên trên
bottom Nội dung sẽ được căn chỉnh xuồng dưới
baseline Nội dung sẽ được căn chỉnh cơ bản
middle Nội dung sẽ được căn chỉnh đều so với trên và dưới

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.

Xem Thêm

Profile photo of adminTheHalfHeart

B.V.T

Sinh ra và lớn nên ở Bắc Giang. Hiện tại thì tôi đang là một lập trình viên tại VietISO. Tôi lập website này với mục đích là bookmark những gì tôi đã đọc qua và mong muốn chia sẻ những gì tôi biết.