Hướng dẫn cách sử dụng thẻ th trong HTML để tạo một ô tiêu đề và các thuộc tính của thẻ th
thẻ th,thẻ th trong html,các thuộc tính của thẻ th
- 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ẻ <th> 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ẻ <th> :
align | Canh lề nội dung của ô theo chiều ngang |
valign | Canh lề nội dung của ô theo chiều dọc |
colspan | Xác định số lượng ô (theo chiều ngang) mà bạn muốn gộp chung lại với nhau |
rowspan | Xác định số lượng ô (theo chiều dọc) mà bạn muốn gộp chung lại với nhau |
width | Xác định chiều rộng của ô |
height | Xác định chiều cao của ô |
bgcolor | Xác định màu nền của ô |
nowrap | Xác định việc nội dung của ô sẽ được hiển thị trên cùng một dòng |
- Thuộc tính align dùng để canh lề nội dung của ô theo chiều ngang.
- Thuộc tính align có bốn giá trị cơ bản:
left | Nội dung của ô sẽ được canh nằm phía bên trái | |
right | Nội dung của ô sẽ được canh nằm phía bên phải | |
center | Nội dung của ô sẽ được canh nằm ở giữa | |
justify | Nội dung của ô sẽ được canh đều hai bên trái phải |
- Lưu ý: Thay vì sử dụng thuộc tính align của thẻ <th> thì ta cũng có thể sử dụng thuộc tính text-align trong CSS để thay thế.
<table border="1" width="100%"> <tr> <th style="text-align:right">Họ và tên</th> <th>Năm sinh</th> <th>Giới tính</th> <th>Quê quán</th> </tr> </table>
- Thuộc tính valign dùng để canh lề nội dung của ô theo chiều dọc.
- Thuộc tính valign có ba giá trị cơ bản:
top | Nội dung của ô sẽ được canh nằm phía trên | |
bottom | Nội dung của ô sẽ được canh nằm phía dưới | |
middle | Nội dung của ô sẽ được canh nằm ở giữa |
- Lưu ý: Thay vì sử dụng thuộc tính valign của thẻ <th> thì ta cũng có thể sử dụng thuộc tính vertical-align trong CSS để thay thế.
<table border="1"> <tr style="height:200px"> <th>Họ và tên</th> <th style="vertical-align:top">Năm sinh</th> <th>Giới tính</th> <th>Quê quán</th> </tr> </table>
- Thuộc tính colspan xác định số lượng ô (theo chiều ngang) mà bạn muốn gộp chung lại với nhau.
<table border="1" width="100%"> <tr align="center"> <th colspan="3">X</th> <th>X</th> <th>X</th> </tr> <tr align="center"> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> </tr> <tr align="center"> <td colspan="5">X</td> </tr> </table>
- Thuộc tính rowspan xác định số lượng ô (theo chiều dọc) mà bạn muốn gộp chung lại với nhau.
<table border="1" width="100%"> <tr> <th rowspan="3">X</th> <th>X</th> <th>X</th> </tr> <tr> <td>X</td> <td rowspan="2">X</td> </tr> <tr> <td>X</td> </tr> <tr> <td>X</td> <td>X</td> <td>X</td> </tr> </table>
- Thuộc tính width dùng để xác định chiều rộng của ô.
- Giá trị của thuộc tính width có thể xác định theo một trong hai loại đơn vị:
<table border="1" width="100%"> <tr> <th width="50%">X</th> <th>X</th> <th width="15px">X</th> <th>X</th> </tr> </table>
- Lưu ý: Tất cả ô trong cùng cột sẽ có chiều rộng bằng với chiều rộng của ô có chiều rộng lớn nhất.
- Thuộc tính height dùng để xác định chiều cao của ô.
<table border="1"> <tr> <th height="200px">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> </table>
- Lưu ý: Tất cả ô trong cùng một hàng sẽ có chiều cao bằng với chiều cao của ô có chiều cao lớn nhất.
- Thuộc tính bgcolor dùng để thiết lập màu nền của ô.
<table border="1"> <tr> <th bgcolor="yellow">Họ và tên</th> <th>Năm sinh</th> <th>Giới tính</th> <th>Quê quán</th> </tr> </table>
- Thuộc tính nowrap xác định nội dung của ô sẽ được hiển thị trên cùng một dòng.
- Nội dung của ô đầu tiên sẽ được hiển thị trên cùng một dòng
<table border="1"> <tr> <th nowrap>Có thể bạn không phải là một lập trình viên nhưng lại rất thích làm website. Bạn muốn học làm, nhưng không biết phải bắt đầu từ đâu và liệu mình có thể học được hay không !?</th> <th>Có thể bạn không phải là một lập trình viên nhưng lại rất thích làm website. Bạn muốn học làm, nhưng không biết phải bắt đầu từ đâu và liệu mình có thể học được hay không !?</th> <th>Có thể bạn không phải là một lập trình viên nhưng lại rất thích làm website. Bạn muốn học làm, nhưng không biết phải bắt đầu từ đâu và liệu mình có thể học được hay không !?</th> </tr> </table>
- Hầu hết các trình duyệt sẽ hiển thị phần tử <th> với định dạng CSS như sau:
th { display: table-cell; vertical-align: inherit; font-weight: bold; text-align: center; }