Định nghĩa và sử dụng
- Tag <table> được dùng để tạo một bảng HTML.
Một tag <table> đơn giản có chứa một hoặc nhiều <tr>, <th> và <td>, trong đó:
- <tr> xác định hàng của table.
- <th> xác định phần tử tiêu đề của table
- <td> xác định phần tử nội dung của table
- Một table phức tạp có thể bao gồm nhiều thành phần khác, gồm: <caption>, <col>, <colgroup>, <thead>, <tfoot>, và <tbody>.
Sự khác nhau giữa HTML và XHTML
| HTML4.01 | XHTML1.0 | XHTML1.1 |
|---|---|---|
| Không có sự khác biệt | ||
Cấu trúc
<table></table>
Ví dụ phần tử tiêu đề <th> theo chiều ngang
Html viết:
<table>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>1</td>
<td>5</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</table>
Hiển thị trình duyệt:
| A | B |
|---|---|
| 1 | 5 |
| 9 | 10 |
Ví dụ phần tử tiêu đề <th> theo chiều dọc
Html viết:
<table>
<tr>
<th>A</th>
<td>1</td>
<td>3</td>
</tr>
<tr>
<th>B</th>
<td>2</td>
<td>4</td>
</tr>
</table>
Hiển thị trình duyệt:
| A | 1 | 2 |
|---|---|---|
| B | 3 | 4 |
Trình duyệt hỗ trợ
<table> được hỗ trợ trong đa số các trình duyệt.
Thuộc tính
Cách sử dụng: <table thuoctinh="giatri"></table>
Thuộc tính tùy chọn
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| align | left center right |
align="left" | Được dùng để sắp xếp vị trí cho văn bản. Không khuyến khích sử dụng, sử dụng thuộc tính text-align của css để thay thế. Không được hỗ trợ trong DTD Strict |
| bgcolor | rgb(x,x,x) #xxxxxx colorname |
bgcolor="#ff0000" | Xác định background màu cho <table>. Không khuyến khích sử dụng, sử dụng thuộc tính background-color của css để thay thế. Không được hỗ trợ trong DTD Strict |
| border | pixels | border="1" | Xác định đường viền quanh <table> |
| cellpadding | pixels | cellpadding="2px" | Xác định khoảng trống giữa các bên ngoài cột và nội dung cột. |
| cellspacing | pixels | cellspacing="2px" | Xác định khoảng cách giữa các cột. |
| frame | void above below hsides lhs rhs vsides box border |
frame="above" | Xác định phần nào của đường viền ngoài được hiển thị. Không được hỗ trợ trong trình duyệt IE |
| rules | none groups rows cols all |
rules="group" | Xác định phần nào của đường viền trong được hiển thị. Không được hỗ trợ trong trình duyệt IE, Chrome, Safari |
| summary | Text | summary="Tóm tắt" | Xác định bảng tóm tắt nội dung của <table> |
| width | pixels % |
width="100px" | Xác định chiều rộng của <table> |
Thuộc tính tổng quát (xem thêm)
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| class | Tên class | class="section" | Tên class |
| dir | rtl ltr |
dir="rtl" | Xác định hướng văn bản cho các nội dung trong một thành phần. |
| id | Tên id | id="layout" | Xác định tên id cho thành phần, mỗi thành phần chỉ có một id duy nhất (hoặc một id chỉ có trong một thành phần) trong một văn bản HTML |
| lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần. |
| style | Kiểu định dạng | style="color: red" | Xác định một định dạng cho một thành phần. |
| tabindex | Số | tabindex="5" | Xác định thứ tự tab của một thành phần. |
| title | Text | title="Đây là title" | Xác định thêm thông tin cho thành phần. |
| xml:lang | Mã ngôn ngữ | lang="vi" | Xác định mã ngôn ngữ cho nội dung trong một thành phần, trong văn bản XHTML. |
Thuộc tính sự kiện
Không được hỗ trợ trong DTD Strict
| Thuộc tính | Giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| onclick | Code script | onclick="code" | Script chạy khi click chuột. |
| ondblclick | Code script | ondblclick="code" | Script chạy khi double click chuột. |
| onmousedown | Code script | onmousedown="code" | Script chạy khi button chuột được nhấn. |
| onmousemove | Code script | onmousemove="code" | Script chạy khi di chuyển con trỏ chuột. |
| onmouseout | Code script | onmouseout="code" | Script chạy khi di chuyển con trỏ chuột ra khỏi thành phần. |
| onmouseover | Code script | onmouseover="code" | Script chạy khi di chuyển con trỏ chuột di chuyển trên thành phần. |
| onmouseup | Code script | onmouseup="code" | Script chạy khi button chuột được thả ra. |
| onkeydown | Code script | onkeydown="code" | Script chạy khi nút trên bàn phím được nhấn. |
| onkeypress | Code script | onkeypress="code" | Script chạy khi nút trên bàn phím được nhấn và thả ra. |
| onkeyup | Code script | onkeyup="code" | Script chạy khi nút trên bàn phím được thả ra. |