Bảng HTML:Hướng dẫn từng bước

Bảng HTML là tập hợp dữ liệu được trình bày dưới dạng hàng và cột. Để tạo bảng HTML, hãy sử dụng <table> phần tử . Bạn có thể sử dụng <tr> để tạo hàng, <td> để tạo cột và <th> để tạo tiêu đề bảng.

Bảng được sử dụng để trình bày dữ liệu một cách dễ hiểu bằng cách sử dụng các hàng và cột. Chúng ta bắt gặp các bảng mỗi ngày, từ lịch trình xe buýt cho người đi xe buýt biết khi nào xe buýt sẽ đến, đến bảng thành phần trong các loại thực phẩm chúng ta ăn.

Trong HTML, bảng được sử dụng như một phương pháp trình bày dữ liệu. Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về bảng HTML, các ô kéo dài nhiều cột và hàng cũng như cách tạo kiểu cho một bảng. Đến cuối hướng dẫn này, bạn sẽ trở thành một chuyên gia trong việc tạo và làm việc với các bảng trong HTML.

Tạo bảng HTML

Bảng là tập hợp dữ liệu được trình bày dưới dạng hàng và cột. Bằng cách sử dụng bảng, có thể dễ dàng thấy các kết nối giữa một tập hợp các giá trị trong một tập dữ liệu.

Trong HTML, các bảng được xác định bằng cách sử dụng <table> yếu tố. Trong <table> , bạn có thể sử dụng:

• để tạo các hàng
• để tạo cột
• để tạo tiêu đề bảng.

Giả sử chúng ta muốn tạo một bảng liệt kê các loại cà phê được bán trong một quán cà phê cùng với giá của chúng, giống như chúng ta đã làm ở trên. Bảng này phải có hai cột, cà phê và giá cả và ba hàng. Chúng tôi có thể sử dụng mã sau để xác định bảng này trong HTML:

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

Đây là kết quả của bảng của chúng tôi:

Trong ví dụ này, chúng tôi đã tạo một bảng với một hàng tiêu đề, hai cột và ba hàng dữ liệu bảng. Hãy chia nhỏ mã của chúng ta.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

Đầu tiên, chúng tôi sử dụng <table> Thẻ HTML để hướng dẫn trang web của chúng tôi tạo một bảng. Sau đó, chúng tôi sử dụng <tr> để tạo một hàng và <th> để xác định tiêu đề cột cho bảng của chúng tôi. Trong trường hợp này, tiêu đề cột của chúng tôi là Coffee và Price .

Tiếp theo, chúng tôi sử dụng thêm ba <tr> để tạo từng hàng trong số ba hàng bảng hiển thị tên và giá cà phê của chúng tôi trong các ô dữ liệu của bảng. Mỗi <tr> này các thẻ chứa <td> , được sử dụng để đại diện cho một ô cột trong bảng. Ví dụ:phần tử td được sử dụng để đại diện cho Espresso và $2.00 trong lần nhập cà phê đầu tiên của chúng tôi.

Tạo kiểu bảng

Có một số cách để chúng ta có thể tạo kiểu bảng trong HTML.

Đường viền

Trong HTML, các bảng không có đường viền theo mặc định. Điều này có nghĩa là nếu chúng ta muốn một đường viền xuất hiện trên bảng của mình, chúng ta cần sử dụng CSS. Thuộc tính đường viền CSS được sử dụng để thêm đường viền vào bảng HTML.

Giả sử chúng ta muốn thêm một đường viền đen chắc chắn xung quanh bảng của chúng ta từ trước đó. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

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

Khi chúng tôi sử dụng kiểu này trong mã bảng của mình, bảng của chúng tôi sẽ thay đổi để bao gồm một đường viền xung quanh mỗi ô của nó và chính bảng đó. Đây là bảng sửa đổi của chúng tôi:

Bây giờ bảng của chúng tôi có một đường viền, giúp đọc dữ liệu trong bảng của chúng tôi dễ dàng hơn. Tuy nhiên, kiểu mà chúng ta đã tạo ở trên đặt một đường viền xung quanh mỗi ô và tách từng đường viền ra. Nếu chúng ta muốn thu gọn từng đường viền thành một, chúng ta có thể sử dụng thuộc tính thu gọn đường viền. Đây là mã chúng tôi sẽ sử dụng để thực hiện nhiệm vụ này:

table {
	border-collapse: collapse
}

Bảng mới của chúng tôi trông như thế này:

Như bạn có thể thấy, bảng của chúng ta hiện có một đường viền, thay vì một đường viền xung quanh mỗi ô và bản thân bảng.

Căn chỉnh các tiêu đề

Theo mặc định, các tiêu đề được căn chỉnh cho chính giữa ô. Nếu bạn muốn căn chỉnh một tiêu đề ở bên trái hoặc bên phải của một ô, bạn có thể chỉ định thuộc tính text-align cho <th> trong bảng của bạn (hãy nhớ, <th> được sử dụng để chỉ định các tiêu đề).

Đây là mã bạn sẽ sử dụng:

th {
	text-align: left;
}

Nếu chúng tôi áp dụng kiểu này cho bảng của mình từ phía trên, bảng sau sẽ được tạo:

Bảng trên của chúng tôi đã căn chỉnh các tiêu đề cột ở bên trái bảng của chúng tôi.

Có rất nhiều kiểu khác có thể được áp dụng cho bảng HTML, nhưng với mục đích của hướng dẫn này, chúng tôi tập trung vào đường viền bảng và đường viền thu gọn. Về sau, chúng tôi sẽ sử dụng các kiểu mà chúng tôi đã xác định trong phần này của hướng dẫn để làm cho dữ liệu của chúng tôi dễ đọc hơn.

Kéo dài nhiều hàng và cột

Khi làm việc với các bảng, bạn có thể muốn một ô kéo dài nhiều hàng hoặc nhiều cột.

Ví dụ:giả sử chúng ta muốn cột giá của mình trước đó trải dài trên hai cột. Đó là nơi xuất hiện thuộc tính colspan và rowspan. Rowspan được sử dụng để kéo dài nhiều hàng trong bảng và colspan được sử dụng để kéo dài nhiều cột trong bảng.

Dưới đây là ví dụ về bảng sử dụng colspan để kéo dài Price trên hai cột:

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

Đây là cách bảng của chúng tôi xuất hiện:

Như bạn có thể thấy, cột giá bây giờ kéo dài trên hai hàng. Ngoài ra, bạn có thể sử dụng rowspan theo cách tương tự để tạo ô kéo dài trên nhiều hàng.

Giả sử bạn có một bảng lưu trữ thông tin chi tiết về một loại cà phê cụ thể trên thực đơn.

Bạn muốn thông tin về giá chiết khấu của cà phê — được áp dụng vào ngày cuối cùng của hàng tháng để thu hút khách hàng mua cà phê — và giá thông thường xuất hiện dưới cùng một tiêu đề Price , có nhãn để phân biệt giá. Bạn có thể sử dụng mã sau để thực hiện nhiệm vụ này:

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

Đây là kết quả của bảng của chúng tôi:

Trong ví dụ này, bạn có thể thấy rằng Price nhãn kéo dài qua hai hàng.

Xác định Đầu trang, Nội dung và Chân trang của Bảng

Khi bạn làm việc với một bảng, có ba thẻ được sử dụng để giúp bạn cấu trúc dữ liệu của mình tốt hơn.

<thead> được sử dụng để xác định tiêu đề trong bảng của bạn, <tbody> được sử dụng để xác định nội dung trong bảng của bạn và thẻ <tfoot> được sử dụng để xác định chân trang trong bảng của bạn.

Hãy lấy bảng của chúng ta từ ví dụ đầu tiên để minh họa cách hoạt động của điều này. Giả sử chúng ta đang xây dựng một bảng liệt kê tất cả các loại cà phê được bán tại một quán cà phê. Để làm cho mã của chúng tôi dễ đọc hơn, chúng tôi muốn tách phần đầu, phần thân và phần chân trang của bảng ra. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

Trong bảng này, chúng tôi đã sử dụng <thead> , <tbody> và <tfoot> để xác định đầu trang, nội dung và chân trang của bảng tương ứng.

<thead> được sử dụng để phân biệt hàng tiêu đề của chúng tôi, hàng này chứa Coffee và Price tiêu đề bảng. <tbody> được sử dụng để lưu trữ các hàng chứa dữ liệu chính cho bảng của chúng tôi (giá cà phê).

<tfoot> được sử dụng để lưu trữ một hàng cho biết thời điểm bảng được cập nhật lần cuối. Chúng tôi đã đặt dữ liệu này trong thẻ footer vì nó không phải là mục nhập cho danh sách các loại cà phê và giá của chúng.

Mặc dù các thẻ này là tùy chọn, nhưng chúng giúp bạn cấu trúc bảng tốt hơn trong HTML.

Chú thích bảng trong HTML

<caption> được sử dụng để thêm tiêu đề, còn được gọi là caption , vào bảng của bạn.

<caption> thẻ phải được đặt ngay sau <table> mở trong bảng của bạn. Đây là một ví dụ về <caption> đang được sử dụng để thêm tiêu đề Coffee Menu vào danh sách các loại cà phê của chúng tôi:

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

Bảng của chúng tôi xuất hiện như sau:

Trong mã của chúng tôi, chúng tôi sử dụng <caption> để thêm tiêu đề Coffee Menu vào bảng.

Kết luận

Các bảng có thể đơn giản hoặc phức tạp tùy theo bạn muốn và bài viết này đề cập đến tất cả những gì bạn cần biết về kiến ​​thức cơ bản về bảng trong HTML.

Bài viết này thảo luận về cách tạo bảng trong HTML, cách áp dụng các kiểu cơ bản cho bảng, cách cấu trúc bảng, cách mở rộng ô qua nhiều cột và hàng cũng như cách sử dụng chú thích với bảng.

Bây giờ bạn đã có kiến ​​thức cần thiết để bắt đầu làm việc với các bảng trong HTML như một người chuyên nghiệp!