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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Ngọc Minh</td> </tr> <tr> <td>3</td> <td>Huy Minh</td> </tr> </table> </body> </html> |
Kết quả:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <style> table { width: 100%; } th { height: 30px; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Ngọc Minh</td> </tr> </table> </body> </html> |
Kết quả:
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 {
}
Ví dụ 3: Thu gọn đường viền của bảng sử dụng thuộc tính border-collapse
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> <th>Tuổi</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> <td>35</td> </tr> <tr> <td>2</td> <td>Linh Giang</td> <td>34</td> </tr> </table> </body> </html> |
Kết quả:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <style> table, td, th { border: 1px solid blue; height: 30px; } table { border-collapse: collapse; width: 100%; } th { text-align: left; } td { text-align: right; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Linh Giang</td> </tr> </table> </body> </html> |
Kết quả:
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <style> table, td, th { border: 1px solid red; height: 50px; } table { border-collapse: collapse; width: 100%; } th { vertical-align: top; } td { vertical-align: bottom; } </style> </head> <body> <table> <tr> <th>STT</th> <th>Họ tên</th> </tr> <tr> <td>1</td> <td>Hiển Minh</td> </tr> <tr> <td>2</td> <td>Linh Giang</td> </tr> </table> </body> </html> |
Kết quả:
