Table và các thành phần của table trong HTML

-Ở phần trước mọi người đã được tìm hiểu về các thẻ tác dụng vào văn bản trong HTML rồi, bài hôm nay chúng ta sẽ cùng tìm hiểu về bảng trong HTML

1, Table là gì?

-Table là một định dạng dùng để hiển thị dữ liệu ở dạng danh sách. Mỗi table sẽ được chia ra gồm hai thành phần là hàng và cột,

-Trong HTML chúng được tạo ra bởi các thẻ table, tr,th, td, tbody, thead, tfood.

2, Cấu trúc thường gặp của Table.

-Một thẻ table thì thường có cấu trúc mặc định như sau:

<table border="1" cellpadding="2" cellspacing="2">
  <thead>
    <tr>
      <th>Tiêu đề cột 1 hàng 1</th>
      <th>Tiêu đề cột 2 hàng 1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Phần thân cột 1 hàng 2</td>
      <td>Phần thân cột 2 hàng 2</td>
    </tr>
    <tr>
      <td>Phần thân cột 1 hàng 3</td>
      <td>Phần thân cột 2 hàng 3</td>
    </tr>
  </tbody>
</table>

Xem Kết Quả

-Chú thích:

Thuộc tính border="1" là khai báo đường viền cho table.
Thuộc tính cellpadding="2" là khai báo khoảng cách giữa nội dung trong ô so với đường viền.
Thuộc tính cellspacing="2" là khai báo khoảng cách giữa viền trên và viền dưới của đường viền.
Nếu muốn thêm một cột thì thêm 1 cặp <td>nội dung</td>.
Nếu muốn thêm một hàng thì thêm 1 cặp <tr>nội dung</tr>.
Thuộc tính thead,tbody là quy định phần đầu và thân của bảng(có cũng được,không có cũng đựơc), Ngoài ra còn thuộc tính tfood- phần cuối của bảng.

3, Thuộc tính Rowspan,Colspan trong table.

Thuộc tính rowspan.

-Thuộc tính rowspan dùng để gộp 2 hoặc nhiều hàng vào làm một.

Cú Pháp: rowspan="n".
Trong đó n là số lượng hàng muốn gộp.

Ví dụ:

<table border="1" cellpadding="2" cellspacing="2">
	<thead>
		<tr>
			<th >Tiêu đề cột 1 hàng 1</th>
			<th>Tiêu đề cột 2 hàng 1</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan="2">Phần thân cột 1 hàng 2</td>
			<td>Phần thân cột 2 hàng 2</td>
		</tr>
		<tr>
			<td>Phần thân cột 2 hàng 3</td>
		</tr>
	</tbody>
</table>

Xem Kết Quả

Thuộc tính colspan.

-Thuộc tính colspan dùng để gộp 2 hoặc nhiều cột vào làm một.

Cú Pháp: colspan="n".
Trong đó n là số lượng cột muốn gộp.

Ví dụ:

<table border="1" cellpadding="2" cellspacing="2">
	<thead>
		<tr>
		<th >Tiêu đề cột 1 hàng 1</th>
			<th>Tiêu đề cột 2 hàng 1</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td colspan="2">Phần thân cột 1 hàng 2</td>
		</tr>
		<tr>
			<td>Phần thân cột 1 hàng 3</td>
			<td>Phần thân cột 2 hàng 3</td>
		</tr>
	</tbody>
</table>

Xem Kết Quả