Định dạng bảng trong HTML

Bạn hãy tham khảo bài viết về cách tạo bảng trước khi thực hiện bài viết này.

1) Sử dụng thẻ <th> để định dạng tiêu đề cột

Thẻ <th> sẽ định dạng dữ liệu trong ô sẽ hiển thị chữ đậm và dóng giữa nội dung. Thẻ này thường được dùng thay thế thẻ <td> ở tiêu đề các cột.

<table border="1">
	<tr>
        <th>STT</th>
	    <th>Họ và tên</th>
		<th>Điểm TB</th>
	</tr>  
	<tr>
		<td>1</td>
		<td>Nguyễn Văn A</td>
		<td>7.5</td>
	</tr>  
	<tr>
		<td>2</td>
		<td>Trần Thị B</td>
		<td>6.0</td>
	</tr>  
	<tr>
		<td>3</td>
		<td>Lê Văn C</td>
		<td>8.0</td>
	</tr>
</table>

2) Sử dụng thẻ <caption> định dạng tiêu đề cho bảng

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
    </head>
    <body>
 			<table border="1" cellpadding="10">  
				<caption>Bảng điểm</caption>  
				<tr><th>STT</th>
					<th>Họ và tên</th>
					<th>Điểm TB</th>
				</tr>  
				<tr>
					<td>1</td>
					<td>Nguyễn Văn A</td>
					<td>7.5</td>
				</tr>  
				<tr>
					<td>2</td>
					<td>Trần Thị B</td>
					<td>6.0</td>
				</tr>  
				<tr>
					<td>3</td>
					<td>Lê Văn C</td>
					<td>8.0</td>
				</tr>
			</table>
    </body>
</html>

Chạy thử code

3) Định dạng bảng phân tách dòng chẵn dòng lẻ

Bạn cần sử dụng CSS để định dạng: Đổ màu nền cho từng loại dòng.

table tr:nth-child(even) {  
	background-color: #eee;  
}  
table tr:nth-child(odd) {  
	background-color: #fff;  
}

Toàn bộ code như sau:

<!DOCTYPE html>
<html>
    <head>
          <title>Học HTML tại zezo.dev</title>
          <meta charset="UTF-8">
		<style>  
			table, th, td {  
			  border: 1px solid black;  
			  border-collapse: collapse;  
			}  
			th, td {  
			  padding: 10px;  
			}  
			table tr:nth-child(even) {  
			  background-color: #eee;  
			}  
			table tr:nth-child(odd) {  
			  background-color: #fff;  
			}  
			table th {  
			  color: white;  
			  background-color: gray;  
			}  
		</style>
    </head>
    <body>
 			<table border="1" cellpadding="10">  
				<caption>Bảng điểm</caption>  
				<tr><th>STT</th>
					<th>Họ và tên</th>
					<th>Điểm TB</th>
				</tr>  
				<tr>
					<td>1</td>
					<td>Nguyễn Văn A</td>
					<td>7.5</td>
				</tr>  
				<tr>
					<td>2</td>
					<td>Trần Thị B</td>
					<td>6.0</td>
				</tr>  
				<tr>
					<td>3</td>
					<td>Lê Văn C</td>
					<td>8.0</td>
				</tr>
			</table>
    </body>
</html>

Chạy thử code

Kết quả như sau:

Định dạng dòng trong bảng

Phần còn lại là bạn hãy nghiên cứu code CSS để tùy chỉnh cho bảng đẹp hơn nữa nhé. Chúc bạn thành công!