Bảng html

Công nghệ Lập trình HTML

26/09
Thạch
HTML
0
749

Các hướng dẫn xây dựng Web được tổ chức tốt và dễ hiểu với rất nhiều ví dụ về cách sử dụng HTML, CSS, JavaScript, SQL, Python, PHP, Bootstrap, Java, XML và hơn thế nữa.

Bảng HTML

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

Thí dụ

Company	Contact	Country
Sinitc	Nho Thach	Viet Nam
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 một 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

Thí dụ

Một bảng HTML đơn giản:

<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>

Ô bảng

Mỗi ô trong bảng được xác định bởi một <td>và một </td>thẻ.

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

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

Thí dụ

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

Lưu ý: các phần tử dữ liệu bảng là vùng chứa dữ liệu của bảng.
Chúng có thể chứa tất cả các loại phần tử HTML; văn bản, hình ảnh, danh sách, các bảng khác, v.v.

Hàng bảng

Mỗi hàng trong bảng bắt đầu bằng một <tr>và kết thúc bằng một </tr>thẻ.

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

Thí 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>

Bạn có thể có bao nhiêu hàng tùy thích trong một bảng, chỉ cần đảm bảo rằng số ô trong mỗi hàng là như nhau.

Lưu ý: Đôi khi một hàng có thể có ít hơn hoặc nhiều ô hơn một hàng khác. Bạn sẽ tìm hiểu về điều đó trong chương sau.

Tiêu đề bảng

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

Thí dụ

Đặt hàng đầu tiên là tiêu đề bảng:

<table>
  <tr>
    <th>Người 1</th>
    <th>Người 2</th>
    <th>Người 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>

Theo mặc định, văn bản trong <th>các phần tử được in đậm và căn giữa, nhưng bạn có thể thay đổi điều đó bằng CSS.

Thẻ bảng HTML

Tag	Description
<table>	Xác định một bảng
<th>	Xác định ô tiêu đề trong bảng
<tr>	Xác định một hàng trong bảng
<td>	Xác định một ô trong bảng
<caption>	Xác định chú thích bảng
<colgroup>	Chỉ định một nhóm gồm một hoặc nhiều cột trong bảng để định dạng
<col>	Chỉ định thuộc tính cột cho mỗi cột trong phần tử <colgroup>
<thead>	Nhóm nội dung tiêu đề trong một bảng
<tbody>	Nhóm nội dung nội dung trong một bảng
<tfoot>	Nhóm nội dung chân trang trong một bảng