Nội dung bài viết
STDIO Đôi lúc trong một trang web chúng ta cần trình bày dữ liệu theo dòng và theo cột theo một format nhất định nào đó như danh sách chi tiết các sản phẩm, danh sách các thành viên, thống kê ngân sách thì thẻ table là một giải pháp tốt đáp ứng yêu cầu đó.

Giới thiệu

Đôi lúc trong trang web của các bạn cần trình bày dữ liệu dưới dạng bảng như Microsoft Office Excel hay giống như hình dưới đây:

TTF_RenderText_Solid Draw LATIN1 text in solid mode
TTF_RenderUTF8_Solid Draw UTF8 text in solid mode
TTF_RenderUNICODE_Solid Draw UNICODE text in solid mode
TTF_RenderGlyph_Solid Draw a UNICODE glyph in solid mode

Trong bài viết này tác giả sẽ cùng các bạn tìm hiểu thẻ table và các thẻ tr, td trong HTML để giúp chúng ta có thể trình bày dữ liệu theo mong muốn của chinhs mình.

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML của STDIO do tác giả Nguyễn Nghĩa biên soạn.

Đối tượng hướng đến

Bài viết hướng đến những lập trình viên mới tiếp cận với lập trình web và đã xem qua các bài viết về Lập trình HTM căn bản.

Cấu trúc thẻ table

Đầu tiên chúng ta bắt đầu với demo cơ bản sử dụng thẻ table trong HTML sau đó sẽ tìm hiểu cấu trúc của nó như thế nào.

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 7: Thẻ Table Trong HTML</title>
	</head>
	<body>
		<h3>Danh sách một số tác giả của stdio.vn</h3>
		<table border="1">
			<tr>
				<td>Tên</td>
				<td>Id</td>
				<td>Địa chỉ</td>
			</tr>
			
			<tr>
				<td>La Kiến Vinh</td>
				<td>01</td>
				<td>30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, HCMC</td>
			</tr>

			<tr>
				<td>Vũ Quang Huy</td>
				<td>03</td>
				<td>332/65 Dương Quảng Hàm - P5 - Gò Vấp - HCM</td>
			</tr>
		</table>
	</body>
</html>

Kết quả sau khi tau chạy với trình duyệt

ss_2

Bảng trong HTML được định nghĩa bởi cặp thẻ đóng mở <table></table>.

Giữa cặp thẻ này bao gồm các dòng được đĩnh nghĩa bởi thẻ <tr> (table row). Mỗi cặp thẻ <tr> tương ứng với 1 dòng trong bảng.

Trong mỗi dòng được định nghĩa bởi thẻ <tr> bao gồm nhiều cột được định nghĩa bởi thẻ <td> (table data). Mỗi thẻ <td> tương ứng với 1 cột trên dòng hiện tại.

<table border="1">
		<tr>					 Dòng thứ 1
			<td>Tên</td>		 Cột 1, dòng 1
			<td>Id</td>			 Cột 2, dòng 1
			<td>Địa chỉ</td>	 Cột 3, dòng 1
		</tr>
			
		<tr>					 Dòng thứ 2
			<td>La Kiến Vinh</td>
			<td>01</td>
			<td>30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, HCMC</td>
		</tr>
 
		<tr>					 Dòng thứ 3
			<td>Vũ Quang Huy</td>
			<td>03</td>
			<td>332/65 Dương Quảng Hàm - P5 - Gò Vấp - HCM</td>
		</tr>
</table>

Mỗi thẻ <td> có thể chứa 1 table khác, hay các thẻ HTML như image, link, list, text. Ví dụ như sau tôi chèn thẻ <img /> vào thẻ <td>.

<h3>Thông tin cá nhân</h3>
<table border="1">
		<tr>
			<td>Tên</td>
			<td>Tuổi</td>
			<td>Trường</td>
			<td>Avatar</td>
		</tr>
			
		<tr>
			<td>Nguyễn Văn Nghĩa</td>
			<td>20</td>
			<td>Đại học Công Nghệ Thông Tin, ĐHQG HCM</td>
			<td><img src="avt_nguyennghia.png" width="60" height="60" /></td>
		</tr>
</table>

Kết quả

ss_4

rowspan và colspan

rowspan là thuộc tính giúp ta xác định số dòng được gộp trong một phần tử.

Ví dụ về rowspan:

<table border="1">
		 <tr>
			<td>Tên</td>
			<td>Nguyễn Nghĩa</td>
		 </tr>
		 <tr>
			<td rowspan="2">Địa chỉ</td>
			<td>Quảng Bình</td>
		 </tr>
		 <tr>
			<td>Hồ Chí Minh</td>
		</tr>
</table>

Kết quả

ss_5

colspan: tương tự rowspan thì colspan là thuộc tính giúp ta xác định số cột được gộp trong một phần tử.

ví dụ:

<table border="1">
	<tr>
		<th>Họ tên</th>
		<th colspan="2">Số điện thoại</th>
	</tr>
	<tr>
		<td>Nguyễn Văn A</td>
		<td>098xxxxxxx</td>
		<td>0167xxxxxxx</td>
	</tr>
</table>

Kết quả:

ss_6

Lời kết

Trên đây tôi đã giới thiệu và demo một số ví dụ về sử dụng thẻ table. Tuy nhiên, để sử dụng table một cách thẩm mỹ, hợp lý hơn chúng phải cần phải xác định một số thuộc tính cho nó. Vấn đề này tôi sẽ đề cập đến trong các bài viết sau về CSS. Hy vọng bài viết giúp ích cho các bạn trong quá trình học tập cũng như phát triển website.

 

THẢO LUẬN
ĐÓNG