Nội dung chính
- Table trong HTML
- Các thẻ định nghĩa bảng trong HTML
- Ví dụ về bảng trong HTML
- Thuộc
tính border của bảng trong HTML
- 1. Sử dụng thuộc tính border của bảng trong HTML
- 2. Sử dụng thuộc tính border trong CSS
- Table trong HTML với cell padding
- Thuộc tính colspan
- Thuộc tính rowspan
- Thẻ caption
- Tạo style cho ô chẵn, lẻ
Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng [hàng * cột]. Có thể có nhiều cột trong một hàng.
Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang... Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.
Các thẻ định nghĩa bảng trong HTML
Ví dụ về bảng trong HTML
Output:
Thuộc tính border của bảng trong HTMLCó hai cách để xác định border cho các bảng trong HTML.
1. Sử dụng thuộc tính border của bảng trong HTMLBạn có thể sử dụng thuộc tính border của thẻ table trong HTML để chỉ định đường viền. Nhưng bạn không nên sử dụng cách này. Ví dụ:
Output:
2. Sử dụng thuộc tính border trong CSSBạn nên sử dụng thuộc tính border của CSS để chỉ định đường viền của bảng. Ví dụ: table, th, td { border: 1px solid red; border-collapse: collapse; }
Output: Table trong HTML với cell paddingBạn có thể chỉ định padding cho tiêu đề của bảng và data của bảng bằng hai cách:
Bạn nên sử dụng tính chất của CSS thay vì thuộc tính của thẻ trong HTML, dưới đây là ví dụ chỉ định padding cho tiêu đề và nội dung của bẳng bằng CSS. table, th, td { border: 1px solid pink; border-collapse: collapse; } th, td { padding: 10px; } Output: Thuộc tính colspanNếu bạn muốn tạo một ô có độ dài lơn hơn 1 cột, thì bạn có thể dùng thuộc tính colspan. Ví dụ: Code css: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; } Code html:
Output: Thuộc tính rowspanNếu bạn muốn tạo một ô có độ dài lơn hơn hàng, thì bạn có thể dùng thuộc tính rowspan. Ví dụ: Code css: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } Code html:
Output: Thẻ captionThẻ caption được sử dụng để định nghĩa bảng, thẻ này chỉ được sử dụng ngay sau thẻ table. Ví dụ:
Output: Tạo style cho ô chẵn, lẻCode css: table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 10px; } table#alter tr:nth-child[even] { background-color: #eee; } table#alter tr:nth-child[odd] { background-color: #fff; } table#alter th { color: white; background-color: gray; } Output: Chủ Đề |