Hướng dẫn cách sử dụng thẻ table trong HTML để tạo một cái bảng và các thuộc tính được sử dụng của thẻ table
thẻ table,thẻ table trong html,cách tạo bảng,các thuộc tính của thẻ table
- Thông thường, bảng là một phần tử gồm có các hàng và các ô.
(một bảng sẽ có nhiều hàng và một hàng thì sẽ có nhiều ô)
- Ví dụ: Bảng bên dưới có bốn hàng, mỗi hàng có bốn ô.
- Để tạo một bảng thì chúng ta phải sử dụng kết hợp các thẻ: <table>, <tr>, <td>, <th>
- Trong đó:
- Đoạn mã phía dưới dùng để tạo một cái bảng giống như ví dụ phía trên
<table border="1"> <tr> <th>Họ và tên</th> <th>Năm sinh</th> <th>Giới tính</th> <th>Quê quán</th> </tr> <tr> <td>Nguyễn Thành A</td> <td>1993</td> <td>Nam</td> <td>Cần Thơ</td> </tr> <tr> <td>Trần Văn B</td> <td>1985</td> <td>Nam</td> <td>Vĩnh Long</td> </tr> <tr> <td>Lê Thị C</td> <td>1990</td> <td>Nữ</td> <td>Sóc Trăng</td> </tr> </table>
- Thẻ <table> có tám thuộc tính thường hay được sử dụng nhất.
- Dưới đây là bảng mô tả sơ lượt về tám thuộc tính của thẻ <table> :
align | Xác định vị trí của bảng so với các văn bản xung quanh |
bgcolor | Thiết lập màu nền cho bảng |
border | Thiết lập đường viền cho bảng cũng như các ô trong bảng |
cellpadding | Xác định khoảng cách từ nội dung của ô đến đường viền của ô |
cellspacing | Xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh |
frame | Xác định những phần đường viền nào của bảng sẽ được hiển thị |
rules | Xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị |
width | Xác định chiều rộng của bảng |
- Thuộc tính align dùng để xác định vị trí của bảng so với các văn bản xung quanh.
- Thuộc tính align có ba giá trị:
left | Bảng sẽ được đẩy sang trái | |
right | Bảng sẽ được đẩy sang phải | |
center | Bảng sẽ được đẩy ra giữa |
- Ngoài việc sử dụng thuộc tính align thì ta cũng có thể dùng thuộc tính float trong CSS để thay thế.
- Thuộc tính bgcolor dùng để thiết lập màu nền cho bảng.
- Nền của bảng bên dưới có màu vàng
<table border="1" bgcolor="yellow"> ... </table>
- Thuộc tính border dùng để thiết lập đường viền cho bảng cũng như các ô trong bảng.
- Thuộc tính border có hai giá trị:
0 (đây là giá trị mặc định) | Bảng và các ô trong bảng không có đường viền |
1 | Bảng và các ô trong bảng có đường viền |
- Thuộc tính cellpadding xác định khoảng cách từ nội dung của ô đến đường viền của ô.
(mặc định thì giá trị của thuộc tính cellpadding được tính theo đơn vị pixel)
- Nội dung bên trong ô cho đến đường viền của ô sẽ có khoảng cách là 30px
<table border="1" cellpadding="30"> ... </table>
- Thuộc tính cellspacing xác định khoảng cách từ đường viền của ô cho đến các ô xung quanh.
(mặc định thì giá trị của thuộc tính cellspacing được tính theo đơn vị pixel)
- Đường viền của ô cho đến các ô xung quanh sẽ có khoảng cách là 30px
<table border="1" cellspacing="30"> ... </table>
- Thuộc tính frame xác định những phần đường viền nào của bảng sẽ được hiển thị.
- Thuộc tính frame sẽ có các giá trị sau:
void | Cả bốn đường viền của bảng đều KHÔNG được hiển thị |
above | Đường viền phía trên của bảng sẽ được hiển thị |
below | Đường viền phía dưới của bảng sẽ được hiển thị |
lhs | Đường viền bên trái của bảng sẽ được hiển thị |
rhs | Đường viền bên phải của bảng sẽ được hiển thị |
vsides | Đường viền bên trái và bên phải của bảng sẽ được hiển thị |
hsides | Đường viền phía trên và phía dưới của bảng sẽ được hiển thị |
box | Cả bốn đường viền của bảng đều được hiển thị |
border | Cả bốn đường viền của bảng đều được hiển thị |
- Thuộc tính rules xác định những phần đường kẻ nào nằm bên trong bảng sẽ được hiển thị.
- Thuộc tính rules sẽ có các giá trị sau:
none | Không có đường kẻ nào được hiển thị |
rows | Chỉ những đường kẻ ngang được hiển thị |
cols | Chỉ những đường kẻ dọc được hiển thị |
all | Tất cả các đường kẻ ngang và dọc đều được hiển thị |
- Thuộc tính width dùng để xác định chiều rộng của bảng.
- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:
- Hầu hết các trình duyệt sẽ hiển thị phần tử <table> với định dạng CSS như sau:
table { display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }