Tạo bảng cơ bản trong HTML

Trong lập trình web, HTML là ngôn ngữ đánh dấu siêu văn bản (Hypertext Markup Language) được sử dụng để tạo nội dung và cấu trúc trang web. Một bảng HTML được sử dụng để hiển thị dữ liệu ở dạng lưới có nhiều hàng và cột.

{tocify} $title={Nội dung bài viết}

Nội dung bảng sẽ được nằm trong cặp thẻ sau:

<table> Nội dung </table>

Bên trong cặp thẻ thông thường sẽ bao gồm hàng và cột:

<tr>tạo hàng</tr>
<td>tạo cột</td>

1. Code table cơ bản

Thẻ <td> được quy định nằm trong thẻ <tr>

<table>

  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>

</table>

Kết quả:

1	2	3
A	B	C

---

2. Thẻ tiêu đề (Table Header)

Table Header <th> được hiểu là thẻ tiêu đề, quy định nằm trong thẻ <tr> giống thẻ <td>

<table>
  
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
  
  <tr>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
  
</table>

Kết quả:

Header 1	Header 2
Data 1	Data 2
Data 3	Data 4

---

3. Thẻ gộp bảng

Để gộp các bảng lại giống như word hay excel thì 2 thẻ <colspan> và <rowspan> sẽ hỗ trợ điều này

3.1 Gộp bảng theo hàng ngang

<table>

  <tr>
    <th colspan="2">Tiêu đề 1</th>
    <th colspan="2">Tiêu đề 2</th>
  </tr>

  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
    <td>Data 4</td>
  </tr>
  
  </table>

Kết quả:

Tiêu đề 1		Tiêu đề 2
Data 1	Data 2	Data 3	Data 4

3.2 Gộp bảng theo cột dọc

123

Kết quả:

Tiêu đề 1	Data 1	Data 2
	Data 3	Data 4
Tiêu đề 2	Data 5	Data 6
	Data 7	Data 8

---

4. Thẻ đánh dấu thông tin bảng (Head, Body và Foot)

Khi bảng bắt đầu phức tạp và chứa nhiều thông tin thì thẻ <thead> dùng để đánh dấu phần đầu bảng, <tbody> dùng để đánh dấu phần thân bảng, <tfoot> dùng để đánh dấu phần cuối bảng

<table>

  <thead>
    <tr>
      <th colspan="2">Thông tin A</th>
      <th colspan="3">Thông tin B</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th>Công việc 1</th>
      <th>Công việc 2</th>
      <th>Công việc 3</th>
      <th>Công việc 4</th>
      <th>Công việc 5</th>
    </tr>

    <tr>
      <td rowspan="2">Data 1</td>
      <td>Data 2</td>
      <td rowspan="2">Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    
    <tr>
      <td>Data 3</td>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
    
  </tbody>

  <tfoot>
    <tr>
      <th colspan="5">Công việc được chỉnh sửa lần cuối ngày 04/12/2024</th>
    </tr>
  </tfoot>

</table>

Kết quả:

Thông tin A		Thông tin B
Công việc 1	Công việc 2	Công việc 3	Công việc 4	Công việc 5
Data 1	Data 2	Data 4	Data 5	Data 6
	Data 3		Data 7	Data 8
Công việc được chỉnh sửa lần cuối ngày dd/mm/yyyy (hh:mm:ss) AM/PM

   Cảm ơn bạn đã đọc bài viết của chúng tôi. Hy vọng rằng thông tin bạn đang tìm kiếm đã được cung cấp đầy đủ và chi tiết. Mong rằng thông tin chúng tôi cung cấp sẽ hữu ích cho bạn. Cảm ơn và hẹn gặp lại!