Bảng biểu trong HTML

Định nghĩa một bảng biểu trong HTML

Xét ví dụ:

<table style="width:100%">
  <tr>
    <td>Apple</td>
    <td>iPhone</td> 
    <td>iPad</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>Galaxy S</td> 
    <td>Galaxy Tab</td>   </tr>
</table>

See the Pen EjmGVE by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Giải thích các thẻ:

Thẻ <table> dùng để khai báo tạo một bảng biểu.

Thẻ <tr> dùng để khai báo thêm một hàng (table row).

Thẻ <td> dùng để khai báo thêm một ô dữ liệu (table data).

Ngoài ra, còn có thẻ <th> dùng để khai báo các ô tiêu đề (table heading).

Ô dữ liệu định nghĩa bằng thẻ <td> là thành phần chứa dữ liệu của bảng biểu. Nó có thể chứa văn bản, ảnh, danh sách,... thậm chí là 1 bảng biểu khác.

Bảng biểu có đường viền

Nếu bạn khai báo bảng biểu như ví dụ trên, theo mặc định các trình duyệt thường định dạng không có đường viền cho bảng.

Nếu muốn có đường viền giữa các ô, bạn có thể khai báo bảng biểu như ví dụ sau:

<table border="1" style="width:100%">
  <tr>
    <td>Apple</td>
    <td>iPhone</td> 
    <td>iPad</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>Galaxy S</td> 
    <td>Galaxy Tab</td>
  </tr>
</table>

See the Pen yNbGOX by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Đường viền theo mặc định là thuộc tính của HTML theo dạng chuẩn. Tuy nhiên, hiện nay chúng ta thường dùng CSS để định nghĩa được viền của bảng biểu cho đẹp hơn.

Ví dụ:

table, th, td {
    border: 1px solid black;
}

Nhớ thêm đường viền cho cả khai báo bảng và khai báo các ô.

Bảng biểu với đường viền thu hẹp

Nếu bạn muốn khai báo bảng biểu có đường viền thu hẹp (dạng đường viên đơn). Bạn có thể khai báo CSS như sau:

<table style="width:100%">
  <tr>
    <td>Apple</td>
    <td>iPhone</td> 
    <td>iPad</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>Galaxy S</td> 
    <td>Galaxy Tab</td>
  </tr>
</table>

See the Pen RPVERz by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Định dạng khoảng cách giữa đường viền và dữ liệu của ô

Thuộc tính padding của CSS được dùng để định nghĩa khoảng cách giữa đường viền và dữ liệu trong ô.

Nếu bạn không khai báo mặc định sẽ có không có khoảng cách này, do đó văn bản (hoặc các đối tượng khác) trong ô sẽ nằm sát với đường viền.

Ví dụ về dùng padding:

<table style="width:100%">
  <tr>
    <td>Apple</td>
    <td>iPhone</td> 
    <td>iPad</td>
  </tr>
  <tr>
    <td>Samsung</td>
    <td>Galaxy S</td> 
    <td>Galaxy Tab</td>
  </tr>
</table>

See the Pen LVyMRM by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Tiêu đề của bảng biểu

Chúng ta dùng thẻ <th> để định nghĩa cho các ô tiêu đề. Theo mặc định, các ô tiêu đề này sẽ được in đậm và canh giữa.

<table>
  <tr>
    <th>Apple</th>
    <th>Samsung</th> 
  </tr>
  <tr>
    <td>iPhone</td>
    <td>Galaxy S</td> 
  </tr>
  <tr>
    <td>iPad</td>
    <td>Galaxy Tab</td> 
  </tr>
</table>

See the Pen doWwOr by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Khoảng cách giữa các đường viền

Ta dùng thuộc tính border-spacing trong CSS để quy định khoảng cách giữa các đường viền.

Ví dụ:

<table>
  <tr>
    <th>Apple</th>
    <th>Samsung</th> 
  </tr>
  <tr>
    <td>iPhone</td>
    <td>Galaxy S</td> 
  </tr>
  <tr>
    <td>iPad</td>
    <td>Galaxy Tab</td> 
  </tr>
</table>

See the Pen XbRopE by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 Chú ý: Nếu dùng thuộc tính border-collapse để thu gọn đường viền, thuộc tính border-spacing sẽ không còn tác dụng.

Gộp ô theo cột

Để gộp nhiều ô theo cột ta dùng thuộc tính colspan như ví dụ sau:

<table style="width:100%">
  <tr>
    <th>Tên</th>
    <th colspan="2">Điện thoại</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

See the Pen EjmGWp by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Gộp ô theo dòng

Để gộp nhiều ô theo dòng ta dùng thuộc tính rowspan như ví dụ sau:

<table style="width:100%">
  <tr>
    <th>Tên:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Điện thoại:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

See the Pen WvjLjR by Nguyễn Duy Hiếu (@hieu3210) on CodePen.

 

Tiêu đề (tên) của bảng biểu

Bạn có thể dùng thẻ <caption> để khai báo tiêu đề cho bảng biểu.

Ví dụ:

<table style="width:100%">
  <caption>Bảng 1. Những thương hiệu mũi nhọn</caption>
  <tr>
    <th>Apple</th>
    <th>Samsung</th> 
  </tr>
  <tr>
    <td>iPhone</td>
    <td>Galaxy S</td> 
  </tr>
  <tr>
    <td>iPad</td>
    <td>Galaxy Tab</td> 
  </tr>
</table>

See the Pen EjmGXp by Nguyễn Duy Hiếu (@hieu3210) on CodePen.