Cách tạo bảng (table) trong HTML

Dưới đây là ví dụ về một cái bảng:

1. Cách tạo bảng. Để tạo một cái bảng, ta thực hiện theo các bước sau:

Bước 1: Dùng cặp thẻ <table></table> để tạo một cái bảng. Bước 2: Dùng cặp thẻ <tr></tr> để tạo hàng cho bảng (một cặp thẻ <tr></tr> tương ứng với một hàng)

<table>

</table>

Bước 3: Đặt cặp thẻ <td></td> vào bên trong cặp thẻ <tr></tr> để tạo ô cho hàng (một cặp thẻ <td></td> tương ứng với một ô). Cuối cùng, thêm thuộc tính border với giá trị 1px vào bên trong thẻ <table> để tạo đường viền cho bảng.

<tr>

<td>jQuery</td>

</tr>

<tr>

<td>MySQL</td>

</tr>

<tr>

<td>Bootstrap 3</td>

<td>Angularjs</td>

</tr>

</table>

Nếu bạn muốn dùng hàng đầu tiên làm hàng tiêu đề (chữ được tô đậm và đặt ở giữa), thì thay vì dùng cặp thẻ <td></td> đổi lại bạn dùng cặp thẻ <th></th>

<tr>

<th>jQuery</th>

</tr>

<tr>

<td>MySQL</td>

</tr>

<tr>

<td>Bootstrap 3</td>

<td>Angularjs</td>

</tr>

</table>

2. Định dạng cho bảng. Về phần định dạng cho bảng, chúng ta có bốn thuộc tính cơ bản như sau:

border - Thiết lập độ dày của cái đường viền bao xung quanh bảng và các ô.
cellspacing - Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.
cellpadding - Thiết lập khoảng cách vùng đệm bên trong các ô.
bgcolor - Thiết lập màu nền cho bảng hoặc các ô.
width - Thiết lập chiều rộng cho bảng hoặc các ô.
height - Thiết lập chiều cao cho bảng hoặc các ô.
align - Canh lề cho nội dung bên trong ô (theo chiều ngang)
valign - Canh lề cho nội dung bên trong ô (theo chiều dọc)

<tr>

<td>JavaScript</td>

</tr>

<td>jQuery</td>

<td>MySQL</td>

</tr>

<tr>

<td>Bootstrap 3</td>

</tr>

</table>

3. Thiết lập kích thước cho bảng. Về phần thiết lập kích thước cho bảng, chúng ta có thể thiết lập:

- Chiều rộng cho bảng (Bằng cách đặt thuộc tính width vào bên trong thẻ <table>)
- Chiều rộng cho ô (Bằng cách đặt thuộc tính width vào bên trong thẻ <td> hoặc <th>)
- Chiều cao cho bảng (Bằng cách đặt thuộc tính height vào bên trong thẻ <table>)
- Chiều cao cho hàng (Bằng cách đặt thuộc tính height vào bên trong thẻ <tr>)
- Kích thước có thể được xác định theo đơn vị: px (Pixel) hoặc % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: phần tử chứa bảng table có chiều rộng là 800px, ta thiết lập chiều rộng cho bảng là 50% thì khi hiển thị ra màn hình bảng sẽ có chiều rộng là 400px)

<tr>

</tr>

</tr>

</table>

4. Canh lề nội dung của ô. Để canh lề nội dung cho ô, ta thêm thuộc tính align vào trong thẻ <td> hoặc <th> với các giá trị như sau:

left (Canh nội dung nằm bên trái ô)
center (Canh nội dung nằm ở giữa ô)
right (Canh nội dung nằm bên phải ô)

<tr>

</tr>

</table>

Lưu ý: Nếu ta đặt thuộc tính align vào bên trong thẻ <tr> thì tất cả các ô của hàng đó sẽ có cùng một kiểu canh lề.

5. Gộp các ô trong bảng. Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau. Để gộp các cột lại với nhau ta đặt thuộc tính colspan="số lượng cột muốn gộp" vào trong thẻ <th> hoặc <td>. Để gộp các hàng lại với nhau ta đặt thuộc tính rowspan="số lượng hàng muốn gộp" vào trong thẻ <th> hoặc <td>

<tr>

<th colspan="3">Ngày tháng năm sinh</th>

</tr>

<tr>

<th>Tháng</th>

</tr>

<tr>

<td>Utnhan.wap.sh</td>

</tr>

<tr>

<td>Labanvn.wap.sh</td>

</tr>

</table>

6. Tạo tiêu đề cho bảng

Để tạo tiêu đề nằm phía trên bảng, ta sử dụng <caption align="top">Nội dung tiêu đề</caption>. Để tạo tiêu đề nằm phía dưới bảng, ta sử dụng <caption align="bottom">Nội dung tiêu đề</caption>

<tr>

</tr>

<tr>

</tr>

</table>