Thẻ <table> trong HTML được sử dụng để tạo bảng trên trang web. Dưới đây là một số ví dụ về cách sử dụng thẻ <table> cùng với các thẻ khác để tạo bảng có độ phức tạp khác nhau:

Ví dụ 1: Bảng đơn giản

html
<table>
  <tr>
    <td>Cell 1,1</td>
    <td>Cell 1,2</td>
  </tr>
  <tr>
    <td>Cell 2,1</td>
    <td>Cell 2,2</td>
  </tr>
</table>

Ví dụ 2: Bảng với tiêu đề

html
<table>
  <caption>Employee List</caption>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>Designer</td>
  </tr>
</table>

Ví dụ 3: Bảng có đường kẻ

html
<table border="1">
  <tr>
    <td>Cell 1,1</td>
    <td>Cell 1,2</td>
  </tr>
  <tr>
    <td>Cell 2,1</td>
    <td>Cell 2,2</td>
  </tr>
</table>

Ví dụ 4: Bảng phức tạp với colspan và rowspan

html
<table border="1">
  <tr>
    <td rowspan="2">Header 1</td>
    <td colspan="2">Header 2</td>
  </tr>
  <tr>
    <td>Cell 2,1</td>
    <td>Cell 2,2</td>
  </tr>
  <tr>
    <td>Cell 3,1</td>
    <td>Cell 3,2</td>
    <td>Cell 3,3</td>
  </tr>
</table>

Ví dụ 5: Bảng responsive với các lớp CSS

html
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>1</td>
    <td>John Doe</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Jane Smith</td>
    <td>Designer</td>
  </tr>
</table>

Những ví dụ trên giúp bạn hiểu cách sử dụng thẻ <table> trong HTML để tạo các bảng với độ phức tạp và tính linh hoạt khác nhau.