Bảng trong HTML

Ví dụ về bảng

Xác định bảng HTML

Trong HTML, bảng được định nghĩa bằng thẻ <table>

Mỗi hàng được xác định bằng thẻ <tr> (table row). Tiêu đề được xác định bằng thẻ <th> (table header). Theo mặc định, các tiêu đề của bảng in đậm, và được căn giữa. Mỗi ô dữ liệu của bảng được xác định bằng thẻ <td> (table data/cell).

Ví dụ

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Note: Phần tử <td> là ô 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, bảng khác, vv.

Thêm đường viền cho bảng

Nếu bạn không chỉ định đường viền cho bảng, nó sẽ được hiển thị mà không có viền.

Đường viền được đặt bằng thuộc tính CSS border:

Ví dụ

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

Note: Nhớ đặt đường viền cho cả bảng và các ô dữ liệu.

Thu gọn đường viền

Nếu bạn muốn các đường viền thu gọn thành một đường viền, hãy thêm thuộc tính border-collapse CSS:

Ví dụ

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

Thêm padding cho các ô dữ liệu

Cell(ô dữ liệu) padding chỉ ra khoảng cách giữa nội dung và đường viền của ô.

Nếu bạn không chỉ ra padding, các ô của bảng sẽ được hiển thị mà không có padding.

Để thêm padding, sử dụng thuộc tính CSS padding:

Ví dụ

th, td {
  padding: 15px;
}

Căn trái tiêu đề

Mặc định, tiêu đề của bảng in đậm và được căn giữa.

Để căn trái tiêu đề bảng, sử dụng thuộc tính CSS text-align:

Ví dụ

th {
  text-align: left;
}

Thêm khoảng cách viền

Khoảng cách viền chỉ ra khoảng cách giữa các ô.

Để thêm khoảng cách viền cho bảng, sử dụng thuộc tính CSS border-spacing:

Ví dụ

table {
  border-spacing: 5px;
}

Note: Nếu bảng có đường viền được thu gọn (border-collapse: collapse) thì border-spacing không có tác dụng.

Gộp nhiều cột thành một ô

Để tạo một ô được gộp từ nhiều cột, sử dụng thuộc tính colspan:

Ví dụ

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Gộp nhiều hàng thành một ô

Để tạo một ô được gộp từ nhiều hàng, sử dụng thuộc tính rowspan:

Ví dụ

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Thêm chú thích

Để thêm chú thích vào bảng, sử dụng thẻ <caption>:

Ví dụ

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Thêm style đặc biệt cho một bảng

Để xác định một kiểu đặc biệt cho một bảng, ta thêm thuộc tính id cho bảng đó

Ví dụ

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Sau đó thêm style đặc biệt cho bảng này

Ví dụ

table#t01 {
  width: 100%; 
  background-color: #f1f1c1;
}

table#t01 tr:nth-child(even) {
  background-color: #eee;
}
table#t01 tr:nth-child(odd) {
  background-color: #fff;
}
table#t01 th {
  color: white;
  background-color: black;
}

Tổng kết chương

• Dùng phần tử <table> để xác định một bảng
• Dùng phần tử <tr> để xác định một dòng
• Dùng phần tử <td> để xác định một ô
• Dùng phần tử <th> để xác định một ô tiêu đề
• Dùng phần tử <caption> để xác định chú thích cho bảng
• Dùng thuộc tính CSS border để xác định đường viền
• Dùng thuộc tính CSS border-collapse để thu gọn đường viền
• Dùng thuộc tính CSS padding để thêm khoảng trống giữa nội dung và viền
• Dùng thuộc tính CSS text-align để căn chỉnh nội dung văn bản
• Dùng thuộc tính CSS border-spacing để đặt khoảng cách giữa các ô
• Dùng thuộc tính colspan để gộp nhiều cột thành một ô
• Dùng thuộc tính rowspan để gộp nhiều hàng thành một ô
• Dùng thuộc tính id để cho một bảng đặc biệt

Bảng tham khảo

Trích nguồn từ: (https://www.w3schools.com/html/html_tables.asp)