html Table borders và sizes

Chúng ta có thể thêm các đường viền với kiểu và hình dạng khác nhau vào trong bảng HTML.

Thêm Borders vào bảng

Khi chúng ta thêm đường viên vào trong một bảng, đường viền cũng nên được thêm vào mỗi ô trong bảng

Để thêm border vào trong bảng, chúng ta sử dụng thuộc tính CSS border trên các phần tử HTML table, th, td.

Ví dụ

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

Xem kết quả

Border đơn

Nếu chúng ta không muốn có đường viền kép như trong ví dụ trên, hãy đặt lại thuộc tính CSS border-collapse thành collapse. Đường viền kép sẽ thu gọn lại thành một đường viền đơn duy nhất.

Ví dụ

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

Xem kết quả

Style border table

Chúng ta đặt màu nền của mỗi ô và đặt đường viền màu trắng (giống như màu nền của văn bản), chúng ta sẽ có ấn tượng về một đường viền vô hình.

Ví dụ

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

Xem kết quả

Đường viền tròn

Chúng ta sử dụng thuộc tính border-radius để tạo ra các đường viền với góc được bo tròn

Ví dụ

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

Xem kết quả

Bỏ qua đường viền xung quanh table bằng cách bỏ qua bộ chọn css table.

Ví dụ

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

Xem kết quả

Dotted Table Borders

Sử dụng thuộc tính border-style, chúng ta có thể định dạng style hiển thị của đường viền

Ví dụ

th, td {
  border-style: dotted;
}

Xem kết quả

Các giá trị áp dụng cho thuộc tính CSS border-style như sau:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Border Color

Với thuộc tính border-color, chúng ta có thể chỉ định màu sắc cho đường viền.

Ví dụ

th, td {
  border-style: solid;
  border-color: #96D4D4;
}

Xem kết quả

HTML Table Width

Để đặt chiều rộng của bảng, chúng ta sử dụng thuộc tính style vào phần tử html <table>.

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>

Xem kết quả

Lưu ý

Sử dụng tỷ lệ phần trăm làm đơn vị kích thước cho chiều rộng có nghĩa là phần tử này sẽ rộng như thế nào so với phần tử cha của nó, trong trường hợp này là phần tử <body>.

HTML Table Column Width

Để đặt kích thước của một cột cụ thể, chúng ta sử dụng thuộc tính style trên phần tử <th> hoặc <td>

Ví dụ

<table style="width:100%">
  <tr>
    <th style="width:70%">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>

Xem kết quả

HTML Table Row Height

Để đặt chiều cao của một hàng cụ thể, chúng ta sử dụng thuộc tính style vào phần tử <tr> trong bảng.

Ví dụ

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