Cách tạo bảng (table) trong HTML
Dưới đây là ví dụ về một cái bảng: HTML/CSS JavaScript Server Side HTML jQuery PHP CSS Ajax MySQL Bootstrap 3 Angularjs ASP.NET Cách tạo bảng Để tạo một cái bảng, ta thực hiện theo ...
Dưới đây là ví dụ về một cái bảng:
| HTML/CSS | JavaScript | Server Side |
|---|---|---|
| HTML | jQuery | PHP |
| CSS | Ajax | MySQL |
| Bootstrap 3 | Angularjs | ASP.NET |
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.
<table> </table>
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>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</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.
<table border="1px">
<tr>
<td>HTML</td>
<td>jQuery</td>
<td>PHP</td>
</tr>
<tr>
<td>CSS</td>
<td>Ajax</td>
<td>MySQL</td>
</tr>
<tr>
<td>Bootstrap 3</td>
<td>Angularjs</td>
<td>ASP.NET</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>
<table border="1px">
<tr>
<th>HTML</th>
<th>jQuery</th>
<th>PHP</th>
</tr>
<tr>
<td>CSS</td>
<td>Ajax</td>
<td>MySQL</td>
</tr>
<tr>
<td>Bootstrap 3</td>
<td>Angularjs</td>
<td>ASP.NET</td>
</tr>
</table>
Đị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:
| Thuộc tính | Ý nghĩa |
|---|---|
| border | Thiết lập độ dày của đường viền bao xung quanh bảng |
| cellpadding | Thiết lập khoảng cách giữa nội dung của ô và đường viền của ô |
| cellspacing | Thiết lập khoảng cách giữa hai ô |
| bgcolor | Thiết lập màu nền
|
<table border="5px" cellpadding="30px" cellspacing="20px">
<tr>
<td>HTML</td>
<td>JavaScript</td>
<td>PHP</td>
</tr>
<tr bgcolor="yellow">
<td>CSS</td>
<td>jQuery</td>
<td>MySQL</td>
</tr>
<tr>
<td>Bootstrap 3</td>
<td>Ajax</td>
<td bgcolor="green">ASP.NET</td>
</tr>
</table>
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 awidth vào bên trong thẻ <table>)
- Chiều rộng cho ô (Bằng cách đặt thuộc tính awidth 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)
- % (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)
<table border="1px" cellpadding="0px" cellspacing="0px" awidth="100%">
<tr>
<td awidth="50px">HTML</td>
<td>HTML</td>
<td>HTML</td>
<td awidth="50%">HTML</td>
</tr>
<tr height="200px">
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
</table>
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 ô)
<table border="1px" cellpadding="0px" cellspacing="0px" awidth="100%">
<tr>
<td>HTML</td>
<td align="center">HTML</td>
<td align="right">HTML</td>
</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ề.
Gộp các ô trong bảng
| STT | MSSV | Họ tên | Ngày tháng năm sinh | ||
|---|---|---|---|---|---|
| Ngày | Tháng | Năm | |||
| 1 | 1111xxxx | Nguyễn Thành Nhân | 31 | 12 | 1990 |
| 2 | 1111xxxx | Web cơ bản | 30 | 11 | 1991 |
Để 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>
<table border="1px" cellspacing="0px" awidth="100%">
<tr>
<th rowspan="2">STT</th>
<th rowspan="2">MSSV</th>
<th rowspan="2">Họ tên</th>
<th colspan="3">Ngày tháng năm sinh</th>
</tr>
<tr>
<th>Ngày</th>
<th>Tháng</th>
<th>Năm</th>
</tr>
<tr>
<td>1</td>
<td>1111xxxx</td>
<td>Nguyễn Thành Nhân</td>
<td>31</td>
<td>12</td>
<td>1990</td>
</tr>
<tr>
<td>2</td>
<td>1111xxxx</td>
<td>Web cơ bản</td>
<td>30</td>
<td>11</td>
<td>1991</td>
</tr>
</table>
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>
<table border="1px" cellpadding="0px" cellspacing="0px" awidth="50%">
<caption align="bottom">LẬP TRÌNH WEB</caption>
<tr>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
<tr>
<td>HTML</td>
<td>HTML</td>
<td>HTML</td>
</tr>
</table>
