Làm cách nào để bạn thêm hàng và cột trong html?

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 ta có thể sử dụng đoạn mã sau để xác định bảng này trong HTML

	

		
Coffee
		
Price
	
	

		
Espresso
		
$2.00
	
	

		
Cappuccino
		
$2.50
	
	

		
Latte
		
$2.75
	

Đâ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 có 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 tôi

Đầu tiên, chúng tôi sử dụng thẻ HTML

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

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

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

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

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

Tiếp theo, chúng tôi đã sử dụng thêm ba thẻ

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

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

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

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

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

» THÊM.   Vùng văn bản HTML. Hướng dẫn từng bước

Kiểu dáng bảng

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

biên giới

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 CSS border dùng để thêm đường viền vào bảng HTML

Giả sử chúng tôi muốn thêm một đường viền màu đen xung quanh bảng của chúng tôi 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 tôi đã tạo ở trên đặt một đường viền xung quanh mỗi ô và tách ra từng đường viền. 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 sụp đổ đường viền. Đây là mã chúng tôi sẽ sử dụng để hoàn thành nhiệm vụ này

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

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à chính bảng đó

Căn chỉnh tiêu đề

Theo mặc định, các tiêu đề được căn chỉnh vào giữa ô. Nếu bạn muốn căn chỉnh tiêu đề sang trái hoặc phải của một ô, bạn có thể chỉ định thuộc tính text-align cho thẻ

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

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

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

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

Nếu chúng ta áp dụng kiểu này cho bảng của mình từ phía trên, thì bảng sau đây 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 của 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 ta sẽ sử dụng các kiểu mà chúng ta đã xác định trong phần này của hướng dẫn để làm cho dữ liệu của chúng ta dễ đọc hơn

» THÊM.   Những điều bạn cần biết về mã hóa trang web bằng HTML

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

Khi làm việc với bảng, bạn có thể muốn một ô trải rộng trên nhiều hàng hoặc cột

Chẳng hạn, giả sử chúng tôi muốn cột giá của mình từ trước đó trải dài trên hai cột. Đó là nơi các thuộc tính colspan và rowspan xuất hiện. Rowspan được sử dụng để mở rộng nhiều hàng trong một bảng và colspan được sử dụng để mở rộng nhiều cột trong một bảng

Dưới đây là ví dụ về bảng sử dụng colspan để mở rộng cột

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

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

Đâ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á hiện trải 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 một ô kéo dài trên nhiều hàng

"Career Karma bước vào cuộc đời tôi khi tôi cần nó nhất và nhanh chóng giúp tôi phù hợp với bootcamp. Hai tháng sau khi tốt nghiệp, tôi đã tìm được công việc mơ ước phù hợp với giá trị và mục tiêu của mình trong cuộc sống. "

Venus, Kỹ sư phần mềm tại Rockbot

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

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 hàng tháng để lôi kéo khách hàng mua cà phê—và giá thông thường xuất hiện dưới cùng tiêu đề

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

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

Đây là đầu ra của bảng của chúng tôi

Trong ví dụ này, bạn có thể thấy rằng nhãn

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

Xác định đầu trang, nội dung và chân trang của bảng

Khi bạn đang 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 tốt hơn

Thẻ

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

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

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

» THÊM.   4 mẹo mã hóa thuộc tính màu HTML 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 thức hoạt động của nó. 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 riêng phần đầu, phần thân và phần cuối của bảng. 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;
}

Trong bảng này, chúng tôi đã sử dụng các thẻ

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

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

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

Thẻ

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

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

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

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

Thẻ

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

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

Thẻ

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

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

Thẻ

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

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

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

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

	

		
Coffee
		
Price
	
	

		
Espresso
		
$2.00
	
	

		
Cappuccino
		
$2.50
	
	

		
Latte
		
$2.75
	

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 thẻ

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

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

Phần kết luận

Các bảng có thể đơn giản hoặc phức tạp tùy theo ý muốn của bạn và bài viết này đã đề cập đến tất cả những gì bạn cần biết về các khái niệm 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 trải ô trên 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 chuyên gia

1 Xếp hạng

Về chúng tôi. Career Karma là một nền tảng được thiết kế để giúp người tìm việc tìm kiếm, nghiên cứu và kết nối với các chương trình đào tạo việc làm để thăng tiến trong sự nghiệp của họ. Tìm hiểu về ấn phẩm CK

Làm cách nào để thêm cột trong HTML?