Thẻ Trong HTML - Web Cơ Bản

Thẻ <td> trong HTML

1) Giới thiệu "các thành phần cơ bản của một cái bảng"

- 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 đó:

• Thẻ <table> xác định phần tử là một cái bảng.
• Thẻ <tr> xác định phần tử là một hàng trong bảng.
• Thẻ <td> xác định phần tử là một ô trong hàng.
• Thẻ <th> xác định phần tử là một ô tiêu đề trong hàng.
(ô tiêu đề là ô chữ được tô đậm nổi bật giống như: Họ và tên, ngày sinh, giới tính, quê quán)

Ví dụ:

- Đ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> Xem ví dụ

2) Các thuộc tính được sử dụng trong thẻ <td>

- Thẻ <td> 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ẻ <td> :

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

2.1) Thuộc tính align

- 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	Xem ví dụ
right	Nội dung của ô sẽ được canh nằm phía bên phải	Xem ví dụ
center	Nội dung của ô sẽ được canh nằm ở giữa	Xem ví dụ
justify	Nội dung của ô sẽ được canh đều hai bên trái phải	Xem ví dụ

- Lưu ý: Thay vì sử dụng thuộc tính align của thẻ <td> thì ta cũng có thể sử dụng thuộc tính text-align trong CSS để thay thế.

Ví dụ: <table border="1" width="100%"> <tr> <td style="text-align:right">1991</td> <td>1992</td> <td>1993</td> </tr> </table> Xem ví dụ

2.2) Thuộc tính valign

- 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	Xem ví dụ
bottom	Nội dung của ô sẽ được canh nằm phía dưới	Xem ví dụ
middle	Nội dung của ô sẽ được canh nằm ở giữa	Xem ví dụ

- Lưu ý: Thay vì sử dụng thuộc tính valign của thẻ <td> thì ta cũng có thể sử dụng thuộc tính vertical-align trong CSS để thay thế.

Ví dụ: <table border="1"> <tr style="height:200px"> <td>Nguyễn Thành A</td> <td style="vertical-align:top">1993</td> <td>Nam</td> <td>Cần Thơ</td> </tr> </table> Xem ví dụ

2.3) Thuộc tính colspan

- 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.

Ví dụ: <table border="1" width="100%"> <tr align="center"> <td colspan="3">X</td> <td>X</td> <td>X</td> </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> Xem ví dụ

2.4) Thuộc tính rowspan

- 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.

Ví dụ: <table border="1" width="100%"> <tr> <td rowspan="3">X</td> <td>X</td> <td>X</td> </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> Xem ví dụ

2.5) Thuộc tính width

- 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ị:

• px (pixel)
• % (tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó)

Ví dụ: <table border="1" width="100%"> <tr> <td width="50%">X</td> <td>X</td> <td width="15px">X</td> <td>X</td> </tr> </table> Xem ví dụ

- 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.

2.6) Thuộc tính height

- Thuộc tính height dùng để xác định chiều cao của ô.

Ví dụ: <table border="1"> <tr> <td height="200px">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> Xem ví dụ

- 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.

2.7) Thuộc tính bgcolor

- Thuộc tính bgcolor dùng để thiết lập màu nền của ô.

Ví dụ: <table border="1" width="100%"> <tr> <td bgcolor="yellow">1991</td> <td>1992</td> <td>1993</td> </tr> </table> Xem ví dụ

2.8) Thuộc tính nowrap

- 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.

Ví dụ:

- 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> <td 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 !?</td> <td>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 !?</td> <td>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 !?</td> </tr> </table> Xem ví dụ

3) Định dạng CSS mặc định

- Hầu hết các trình duyệt sẽ hiển thị phần tử <td> với định dạng CSS như sau:

td { display: table-cell; vertical-align: inherit; }