Bảng HTML
Với HTML bạn cũng có thể tạo bẳng cho trang web của mình.
Ví dụ:
Ví dụ này chỉ bạn cách tạo một bảng bằng HTML
<html>
<body>
<p>
Each table starts with a table tag.
Each table row starts with a tr tag.
Each table data starts with a td tag.
</p>
<h4>One column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>One row and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<h4>Two rows and three columns:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.
One column:
100 |
One row and three columns:
100 | 200 | 300 |
Two rows and three columns:
100 | 200 | 300 |
400 | 500 | 600 |
Đường biên của bảng
<html>
<body>
<h4>With a normal border:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a thick border:</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With a very thick border:</h4>
<table border="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
With a normal border:
First | Row |
Second | Row |
With a thick border:
First | Row |
Second | Row |
With a very thick border:
First | Row |
Second | Row |
Bảng
Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>. Cbữ td là chữ viết tắt của "table data", là nội dung của cột dữ liệu. Một cột dữ liệu có thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng v.v..
<table border="1"> |
Xem trên trình duyệt hiển thị như sau:
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Bảng và thuộc tính đường biên
Nếu bạn không thiết lập thuộc tính đường biên cho bảng thì bảng của bạn sẽ được hiển thị mà không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường thì bạn muốn bảng của bạn có đường biên.
Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.
<table border="1"> |
Heading trong bảng
Heading trong một bảng được xác định bằng thẻ <th>
<table border="1"> |
Xem trên trình duyệt hiển thị như sau:
Heading | Another Heading |
---|---|
row 1, cell 1 | row 1, cell 2 |
row 2, cell 1 | row 2, cell 2 |
Cột chiếm hơn một cột hoặc hàng
<html>
<body>
<h4>Cell that spans two columns:</h4>
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h4>Cell that spans two rows:</h4>
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Thẻ trong bảng
Ví dụ này hướng dẫn bạn cách hiển thị nội dung ở trong nội dung khác.
<html>
<body>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
This is a paragraph This is another paragraph |
This cell contains a table:
|
||||
This cell contains a list
|
HELLO |
Cell padding
Ví dụ này hướng dẫn bạn cách tạo cellpadding để tạo ra nhiều khoảng trắng hơn giữa nội dung và đường biên của nó.
<html>
<body>
<h4>Without cellpadding:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
Without cellpadding:
First | Row |
Second | Row |
With cellpadding:
First | Row |
Second | Row |
Thêm màu nền hoặc hình nền cho bảng
<html>
<body>
<h4>A background color:</h4>
<table border="1" bgcolor="red">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
A background color:
First | Row |
Second | Row |
Thêm màu nền hoặc hình nền cho cột
<html>
<body>
<h4>Background color for a cell:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Xem trên trình duyệt hiển thị như sau:
Background color for a cell:
First | Row |
Second | Row |