HTML Tables

Borders

Chúng ta có thể thêm border cho HTML table thông qua CSS trên các element table, th và td.

table, th, td {
	border: 1px solid black;
}

Để loại bỏ double border ở trong bảng, ta có thể dùng thuộc tính border-collapse như sau:

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}

Sizes

Để thiết lập chiều ngang cho một cột cụ thể nào đó, ta cần áp dụng thuộc tính style cho một thẻ <th> hoặc <td> nào đó.

<tr>
	<th style="width:70%">Firstname</th>
	<th>Lastname</th>
	<th>Age</th>
</tr>

Để thiết lập chiều cao của một dòng cụ thể, ta áp dụng thuộc tính style cho thẻ <tr> của dòng đó:

<tr style="height:200px">
	<td>Jill</td>
	<td>Smith</td>
	<td>50</td>
</tr>

Headers

Ta có thể dùng các cell của cột đầu tiên làm các header cho bảng như sau:

<tr>
	<th>Firstname</th>
	<td>Jill</td>
	<td>Eve</td>
</tr>
<tr>
	<th>Lastname</th>
	<td>Smith</td>
	<td>Jackson</td>
</tr>

Có thể thấy, ta thay thế tag name của element đầu tiên trong số các child element của thẻ <tr> thành thẻ <th>.

Colspan & Rowspan

Để một cell chiếm 2 cột thì ta dùng attribute colspan với giá trị là 2:

<tr>
	<th colspan="2">Name</th>
	<th>Age</th>
</tr>

Để cell chiếm nhiều dòng thì ta dùng thuộc tính rowspan. Ví dụ:

<tr>
	<th rowspan="2">Phone</th>
	<td>555-1234</td>
</tr>

Spacing

Khoảng cách giữa các cell mặc định có kích thước là 2px.

Để thay đổi khoảng cách giữa các cell, ta có thể dùng thuộc tính border-spacing cho thẻ <table> như sau:

table {
	border-spacing: 30px;
}

Related

list
from [[HTML Table]]
sort file.ctime asc

Resources

• HTML Tables