Với HTML bạn cũng có thể tạo bẳng cho trang web của mình.
Ví dụ
Bảng
Ví dụ này chỉ bạn cách tạo một bẳng bằng HTML
Ví dụ này chỉ bạn cách tạo một bẳng bằng HTML
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.
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″> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt
| 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.
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″> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table> |
Heanding trong bảng
Heading trong một bảng được xác định bằng thẻ <th>
Heading trong một bảng được xác định bằng thẻ <th>
| <table border=”1″> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> |
Nó sẽ hiển thị như thế này ở trên trình duyệt
| Heading | Another Heading |
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
Cột trống trong bảng
Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình duyệt.
Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình duyệt.
| <table border=”1″> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> |
Nó sẽ có dạng thế này trên trình duyệt
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla Firefox nó sẽ hiển thị đường biên)
Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó, để làm cho đường biên của nó được hiện thỉ.
| <table border=”1″> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> |
Nó sẽ hiển thị như sau ở trình duyệt
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
Mẹo nhỏ giúp bạn
Loại thẻ <thead>,<tbody> and <tfoot> ít khi được sử dụng, bởi vì nó không phải là tính năng được
Loại thẻ <thead>,<tbody> and <tfoot> ít khi được sử dụng, bởi vì nó không phải là tính năng được
Một vài ví dụ nữa
Cột trống
Ví dụ này chỉ cho bạn cách sử dung “ ” để hiển thị cột không có nội dung.
Ví dụ này chỉ cho bạn cách sử dung “ ” để hiển thị cột không có nội dung.
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.
Ví dụ này hướng dẫn bạn cách hiển thị nội dung ở trong nội dung khác.
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ó.
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ó.
Cell spacing
Cách sử dụng cellspacing để tăng khoảng cách giữa các cột.
Cách sử dụng cellspacing để tăng khoảng cách giữa các cột.
Căn chỉnh nội dung của cột
Hướng dẫn cách sử dụng thuộc tính “align” để căn chỉnh nội dung của cột, và tạo ra một bảng nhìn đẹp mắt hơn.
Hướng dẫn cách sử dụng thuộc tính “align” để căn chỉnh nội dung của cột, và tạo ra một bảng nhìn đẹp mắt hơn.
Thuộc tính frame
Chỉ cách sử dụng thuộc tính “frame” để điều khiển đường biên của bảng.
Chỉ cách sử dụng thuộc tính “frame” để điều khiển đường biên của bảng.
|
0 nhận xét:
Post a Comment