Padding spacing và colspan rowspan html

27/09
Thạch
HTML
0
810

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.

Phần đệm & Khoảng cách trong Bảng HTML

Bảng HTML có thể điều chỉnh phần đệm bên trong ô và cả khoảng cách giữa các ô.

Phần đệm
xin chào	xin chào	xin chào
xin chào	xin chào	xin chào
xin chào	xin chào	xin chào

Với khoảng cách
xin chào	xin chào	xin chào
xin chào	xin chào	xin chào
xin chào	xin chào	xin chào

Bảng HTML - Ô đệm

Phần đệm ô là khoảng trống giữa các cạnh ô và nội dung ô.
Theo mặc định, phần đệm được đặt thành 0.
Để thêm phần đệm trên các ô trong bảng, hãy sử dụng thuộc tính CSS padding:

Thí dụ

th, td {
  padding: 15px;
}

Để chỉ thêm phần đệm phía trên nội dung, hãy sử dụng thuộc padding-toptính.
Và những người khác bên với padding-bottom, padding-leftvà padding-rightcác thuộc tính:

Thí dụ

th, td {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

Bảng HTML - Khoảng cách Ô

Khoảng cách giữa các ô là khoảng cách giữa mỗi ô.
Theo mặc định, không gian được đặt thành 2 pixel.
Để thay đổi khoảng cách giữa các ô trong bảng, hãy sử dụng thuộc tính CSS border-spacetrên table phần tử:

Thí dụ

table {
  border-spacing: 30px;
}

Bảng HTML Colspan & Rowspan

Bảng HTML có thể có các ô kéo dài trên nhiều hàng và / hoặc cột.

TÊN

THÁNG TƯ

Bảng HTML - Colspan

Để tạo một ô mở rộng trên nhiều cột, hãy sử dụng colspanthuộc tính:

Thí dụ

<table>
  <tr>
    <th colspan="2">Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>43</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>57</td>
  </tr>
</table>

Lưu ý: Giá trị của colspanthuộc tính đại diện cho số cột sẽ kéo dài.

Bảng HTML - Rowspan

Để tạo một ô mở rộng trên nhiều hàng, hãy sử dụng rowspanthuộc tính:

Thí dụ

<table>
  <tr>
    <th>Name</th>
    <td>Jill</td>
  </tr>
  <tr>
    <th rowspan="2">Phone</th>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>555-8745</td>
</tr>
</table>

Bài tiếp theo NEXT
Quay lại bài trước BACK