Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành hàng và cột.

Ví dụ:

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Xác định bảng HTML

Một bảng trong HTML bao gồm các ô bảng bên trong các hàng và cột.

Ví dụ:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Table Cells

Mỗi ô của bảng được xác định bằng thẻ và .

td là viết tắt của dữ liệu bảng.

Mọi thứ giữa <td> và </td> đều là nội dung của ô bảng.

Ví dụ:

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

Table Rows

Mỗi hàng trong bảng bắt đầu bằng thẻ và kết thúc bằng thẻ .

tr là viết tắt của hàng bảng.

Ví dụ:

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Table Headers

Đôi khi bạn muốn các ô của mình là ô tiêu đề bảng. Trong những trường hợp đó, hãy sử dụng thẻ thay vì thẻ :

th là viết tắt của tiêu đề bảng.

Ví dụ:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

2. HTML Table Borders

Các bảng HTML có thể có các đường viền có kiểu dáng và hình dạng khác nhau.

Cách thêm đường viền
Để thêm đường viền, hãy sử dụng thuộc tính CSS border trên các phần tử table, th và td:

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

Đường viền bảng được thu gọn (Collapsed Table Borders)

Để tránh có đường viền kép như trong ví dụ trên, hãy đặt thuộc tính CSS border-collapse thành thu gọn.

Điều này sẽ làm cho các đường viền thu gọn lại thành một đường viền duy nhất:

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

Đường viền bảng kiểu

Nếu bạn đặt màu nền cho mỗi ô và đặt đường viền màu trắng (giống như nền tài liệu), bạn sẽ có ấn tượng về một đường viền vô hình:

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

Đường viền bảng chấm

Với thuộc tính border-style, bạn có thể thiết lập hình thức của đường viền.

• dotted     
• dashed     
• solid     
• double     
• groove     
• ridge     
• inset     
• outset     
• none     
• hidden