[CSS] – CSS Tables (Phần 1)

1. Thuộc tính border (đường viền) của bảng

Để thiết lập thuộc tính đường viền của bảng trong CSS, sử dụng thuộc tính border

Cú pháp:

table {

   border: 1px; //Độ dầy đường viền

   border-style: solid; //Kiểu đường viền

   border-color: red; //Màu sắc đường viền

}

Cách viết gọn:

table {

   border: 1px solid red;

}

Ví dụ 1: Tạo bảng với các thuộc tính đường viền sử dụng CSS

Kết quả:

Hình 1. Thuộc tính border trong table
2. Thuộc tính Width và Height của bảng

Thuộc tính width và heigth để xác định độ rộng, chiều cao của bảng sử dụng CSS.

Cú pháp:

table {

   width: 100%; //hoặc đơn vị tính theo px;

}

Ví dụ 2: Thiết lập bảng có độ rộng 100% và cột tiêu đề có chiều cao 30px

Kết quả:

Hình 2. Thuộc tính width và height của bảng, cột

3. Thuộc tính border-collapse

Thuộc tính border-collapse để thu gọn đường viền của bảng thành 1 đường mảnh.

Cú pháp:

table {

   border-collapse: collapse;

}

Ví dụ 3: Thu gọn đường viền của bảng sử dụng thuộc tính border-collapse

Kết quả:

Thuộc tính border-collapse
Hình 3. Thuộc tính border-collapse

4. Thuộc tính text-align

Thuộc tính text-align để căn nội dung của thẻ td, th theo chiều ngang (trái, phải, giữa).

Mặc định, nội dung của thẻ <th> được căn lề giữa. Nội dung của thẻ <td> được căn lề trái.

Cú pháp:

td {

     text-align: center;

}

Ví dụ 4: Sử dụng text-align căn lề nội dung các cột trong bảng

Kết quả:

using text-align property
Hình 4. Thuộc tính text-align

5. Thuộc tính vertical-align

Thuộc tính vertical-align để căn nội dung của thẻ td, th theo chiều dọc (trên, giữa, dưới).

Mặc định, nội dung của bảng được căn giữa theo chiều dọc (middle)

Cú pháp:

td {

     vertical-align: top hoặc middle hoặc bottom;

}

Ví dụ 5: Sử dụng vertical-align căn lề nội dung các cột trong bảng

Kết quả:

using vertical-align property in css
Hình 5. Thuộc tính vertical-align

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.