Đăng nhập bằng Facebook
1. Cách tạo bảng biểu
Để chèn bảng biểu - table trong HTML bạn dùng thẻ <table>
Table gồm có dòng và cột:
- Một dòng trong bảng được nhận biết qua thẻ
<tr>. - Một cột trong bảng được nhận biết qua thẻ
<td>. Một số table còn có tiêu đề. Lúc đó, bạn có thể dùng thẻ<th>thay thẻ<td>ở dòng đầu tiên. Mục đích là để đặt tiêu đề cho cột.
Ví dụ:
<table style="width:100%">
<tr>
<th>Họ và tên</th>
<th>Tuổi</th>
<th>Quê quán</th>
</tr>
<tr>
<td>Nguyễn Văn Tài</td>
<td>20</td>
<td>Hà Nam</td>
</tr>
<tr>
<td>Phạm Hồng Hoa</td>
<td>22</td>
<td>Vĩnh Yên</td>
</tr>
</table> 2. Thêm border (đường viền) cho bảng
Nếu bạn không thêm border cho bảng thì bảng sẽ được hiển thị mà không có border. Để tạo border cho bảng, bạn có thể sử dụng css hoặc thuộc tính border của thẻ <table>. Tuy nhiên thông thường các bạn nên tạo border cho bảng bằng các thuộc tính css.
Ví dụ tạo border cho bảng bằng css:
table, th, td {
border: 1px solid black;
}Xem demo
Ví dụ tạo border cho bảng bằng thuộc tính border của thẻ <table>
<table style="width:100%" border="1">
<tr>
<th>Họ và tên</th>
<th>Tuổi</th>
<th>Quê quán</th>
</tr>
<tr>
<td>Nguyễn Văn Tài</td>
<td>20</td>
<td>Hà Nam</td>
</tr>
<tr>
<td>Phạm Hồng Hoa</td>
<td>22</td>
<td>Vĩnh Yên</td>
</tr>
</table>3. Collapsed Borders
Qua ví dụ tạo border cho bảng bằng thuộc tính css bạn có thể nhận thấy rằng giữa mỗi border của các cột có một khoảng cách nhỏ, và để bỏ đi khoảng cách này bạn sử dụng thuộc tính css: border-collapse.
Ví dụ:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}4. Tạo khoảng cách giữa cách cột
Để tạo khoảng cách giữa dữ liệu và border của các cột trong bảng bạn sử dụng thuộc tính css padding. Mặc định khi tạo bảng, dữ liệu trong các cột sẽ nằm sát với border của các cột. Và điểm đặc biệt của các cột, dòng trong bảng là chúng không nhận thuộc tính margin của css bạn nhé.
Ví dụ:
th, td {
padding: 15px;
}5. Trộn các cột
Để trộn các cột (merge cell) trong bảng bạn sử dụng thuộc tính colspan.
Ví dụ:
<table style="width:100%">
<tr>
<th>Họ và tên</th>
<th colspan="2">Số điện thoại</th>
</tr>
<tr>
<td>Nguyễn Thị Tuyết</td>
<td>0934567889</td>
<td>0234567892</td>
</tr>
<tr>
<td>Nguyễn Văn Hào</td>
<td>0934569879</td>
<td>0948572958</td>
</tr>
</table>6. Trộn các dòng
Để trộn các dòng (merge row) trong bảng bạn sử dụng thuộc tính rowspan.
Ví dụ:
<table style="width:100%">
<tr>
<th>Họ và tên</th>
<th>Nguyễn Thị Tuyết</th>
</tr>
<tr>
<td rowspan="2">Số điện thoại</td>
<td>0934567889</td>
</tr>
<tr>
<td>0234567892</td>
</tr>
</table>7. Tạo tiêu đề (caption) cho bảng
Để tạo tiêu đề cho bảng bạn sử dụng thẻ <caption> và thẻ này phải nằm ngay sau thẻ <table>.
Ví dụ:
<table style="width:100%">
<caption>Điểm thi kỳ I</caption>
<tr>
<th>Họ và tên</th>
<th>Toán</th>
<th>Lý</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>7</td>
<td>8</td>
</tr>
</table>8. Một số lưu ý
Có một số điểm đặc biệt của table đó là:
- Dự liệu giữa các cột sẽ được căn giữa theo chiều dọc.
Xem demo
Để căn chỉnh dữ liệu giữa các cột theo chiều dọc, bạn sử dụng thuộc tính css vertical-align. Thuộc tính này có 3 giá trị đó là: top, middle, bottom.
Ví dụ:
td{
vertical-align:top;
}- Độ rộng của bảng:
Nếu bạn không đặt độ rộng của bảng, thì độ rộng của bảng sẽ bằng độ rộng của dữ liệu trong cột.
Ví dụ:
<table>
<tr>
<th>Họ và tên</th>
<th>Điện thoại</th>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>0977767789</td>
</tr>
<tr>
<td>Nguyễn Văn A</td>
<td>9987867676</td>
</tr>
</table>Xem demo
Để đặt độ rộng cho bảng bạn có thể sử dụng thuộc tính width của thẻ <table> hoặc bằng thuộc tính width của css. Thông thường các bạn nên đặt bằng css nhé.
Ví dụ:
table{
width:100%;
}- Các thẻ
<td>là các thẻ chứa dữ liệu của bảng. Chúng có thể là text, image, danh sách, hoặc là 1 bảng khác…
Lời kết
Với sự đa dạng của thẻ <table>, kết thúc bài học này bạn đã có thể tạo cho mình một site với layout đơn giản. Chúc các bạn thành công với thử nghiệm của mình nhé.
