Trong bài này mình sẽ hướng dẫn cách tạo table trong HTML, qua đó bạn sẽ biết đến các thuộc tính của table như: colspan, rowspan, cellpadding và cellspacing. Bạn đang xem: Colspan là gì
HTML table dùng để hiển thị dữ liệu ở dạng bảng. Mỗi table sẽ được chia ra gồm hai thành phần, đó là cột và hàng. Chúng được tạo thành bởi các thẻ table, tr, td, tbody, thead, tfoot.
Trong các ứng dụng website thì table ít khi được dùng, chỉ những app quản lý dữ liệu thì người ta mới hay dùng. Lý do có thể là cấu trúc của table trông rất nặng nề, rất khó kết hợp với CSS để tạo ra những mẫu giao diện phức tạp. Tuy nhiên, với dạng hiển thị dữ liệu bảng thì table vẫn là ưu tiên số 1.
1. Thẻ table trong HTML là gì?
Thẻ table trong HTML là một thẻ đặc biệt, được dùng để hiển thị dữ liệu dạng bảng lên trình duyệt. Mỗi table sẽ có số hàng và số cột được xác định. Bạn cũng có thể gộp hai hai ô gần kề nhau thành một ô giống như trong Word. Xem hình dưới đây để hiểu hơn về thẻ này.
Bài viết này được đăng tại
Cách đơn giản nhất để tạo table là tuân theo cú pháp sau:
Demo RUN
Hàng 1 cột 1 | Hàng 1 cột 2 | Hàng 1 cột 3 |
Hàng 2 cột 1 | Hàng 2 cột 2 | Hàng 2 cột 3 |
Trong đó:
Thuộc tính border="1" là khai báo đường viền của tableThuộc tính cellspacing="0" là khai báo khoảng cách giữa viền trên và viền dưới của đường viềnThuộc tính cellpadding="5" là khai báo khoảng cách giữa nội dung trong ô so với đường viềnNếu muốn thêm một cột thì chỉ việc bổ sung một tdNếu muốn thêm một hàng thì chỉ việc bổ sung một tr
Bạn hãy tự thay đổi số lượng các thẻ tr và td để quan sát nhé, việc làm này sẽ giúp bạn hiểu rõ hơn về table.
2. Colspan trong HTML
Colspan html là một thuộc tính của thẻ table, nó được dùng để trộn các ô lại với nhau trên cùng một hàng. Ví dụ bạn muốn trộn 2 ô với nhau thì khai báo giá trị cho nó là 2, trộn 3 ô thì khai báo là 3.
Khi khai báo colspan thì số lượng thẻ td của hàng hiện tại sẽ được giảm đi so với các hàng khác.
Như trong ví dụ dưới đây thì thẻ tr đầu tiên chỉ có hai thẻ td, còn thẻ tr thứ hai thì có đến 3 thẻ td. Lý do là trong thẻ tr đầu tiên có một thẻ td có colspan = 2.
Demo RUN
Hàng 1 cột 1 và Hàng 1 cột 2 | Hàng 1 cột 3 | |
Hàng 2 cột 1 | Hàng 2 cột 2 | Hàng 2 cột 3 |
3. Rowspan trong HTML
Tương tự như colspan, rowspan được dùng để gộm hai ô lại với nhau. Tuy nhiên, nó sẽ gộp theo cột chứ không phải theo hàng. Bạn muốn gộp bao nhiêu ô thì hãy nhập số lượng cho nó.
Ví dụ: Xây dựng cấu trúc table cho hình ảnh trên.
Demo RUN
Hàng 1 cột 1 | Hàng 1 cột 3 | Hàng 1 cột 3 |
Hàng 2 cột 2 | Hàng 2 cột 3 |
3. Nhóm thẻ thead - tbody - tfoot
Ở bài tìm hiểu HTML là gì mình có giới thiệu sơ qua về bổ cục của website gồm có các thành phần như header, content, footer thì trong table cũng tương tự. Người ta sẽ chia table ra làm ba thành phần chính, đó là header, body và footer tương ứng với các thẻ thead, tbody và tfoot.
Demo RUN
Username | |
TheHalfheart | TheHalfHeart gmail.com |
vietnamyounglions.vn | vietnamyounglions.vn gmail.com |
Username |
Chạy lên thì kết quả là giao diện vẫn giống như cách làm thông thường. Tuy nhiên, nếu bây giờ ta đổi vị trí của nhóm tbody và thead xem chuyện gì xảy ra.
Ví dụ: Thay đổi vị trí của các thẻ thead, tbody và tfoot
Demo RUN
TheHalfheart | TheHalfHeart gmail.com |
vietnamyounglions.vn | vietnamyounglions.vn gmail.com |
Username | |
Username |
Chạy lên giao diện vẫn bình thường. Theo đúng luật biên dịch thì phần tbody sẽ phải nằm trên cùng bởi vì nó đặt trên cùng, nhưng nó lại nằm đúng vị trí ngay giữa. Điều này có nghĩa là nếu ta sử dụng các nhóm này thì dù đặt ở đâu thì lúc hiển thị vẫn theo luật thead - tbody - tfoot.
4. Các thuộc tính của table trong HTML thường dùng nhất
Sau đây mình xin tổng hợp lại 4 thuộc tính của thẻ table trong HTML, các bạn lưu lại để sau này cần dùng đến nhé.
border: Dùng để khai báo kích thước đường viền của table.cellspacing: Khai báo độ rộng của border.cellpadding: Khai báo khoảng cách giữa đường viền và dữ liệu trong ô.width: Khai báo chiều rộng của các cột (nằm trong thẻ tr).
5. Câu hỏi thường gặp về table HTML
Cách tạo table không có đường viền trong HTML?
Để tạo một table không có đường viền thì ta sẽ thiết lập thuộc tính border="0".
Cách tạo khoảng cách giữa các chữ và đường viền của các ô trong table
Chúng ta sử dụng thuộc tính cellpadding để tạo khoảng trống giữa dữ liệu và đường viền của table. Đơn vị truyền vào được tính theo pixel.
Cách thiết lập đồ dài của các cột trong table
Ta đặt thuột tính width nằm trong các thẻ tr để thiết lập chiều dài cho các cột.
Xem thêm: Kinh Nghiệm Du Lịch Yên Tử Quảng Ninh, Du Lịch Yên Tử
6. Lời kết
Như vậy trong bài này mình đã giới thiệu đến các thẻ HTML liên quan đến table. Điều lưu ý thứ nhất ở bài này là cách gộp nhiều ô với nhau bằng hai thẻ colspan và rowspan. Thứ hai là hiểu được các nhóm thẻ thead, tbody và tfoot để ráp đúng vị trí cho nó. Bài này mình sẽ dừng ở đây, cám ơn bạn đã theo dõi series này.
Bài trước Bài tiếp
Validate form bằng HTML5
Trước đây chúng ta hay validate form bằng Javascript, nhưng ...
Thẻ aside trong HTML5
Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…
Thẻ hgroup trong HTML5
hgroup là một thẻ được thêm vào kể từ phiên bản ...
Thẻ header trong HTML5
Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...
Các thẻ HTML tạo form thu thập dữ liệu
Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...
Tạo background và đường viền cho thẻ HTML
Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…
Tạo menu một cấp bằng HTML đơn giản
Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…
Tạo HTML danh sách bài viết đơn giản
Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…
Tạo bổ cục layout HTML đơn giản
Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..
Phân biệt ID và Class trong HTML
Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..
Cách dùng thẻ div trong HTML để tạo các khối giao diện
Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...
Phân biệt thẻ HTML Block và Inline
Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...
Thuộc tính style trong HTML
Do chúng ta chưa học CSS nên mình sẽ không nói ...
Thẻ title trong HTML
Cách sử dụng thẻ title html ...
Thẻ style trong HTML
Style là một thẻ HTML bình thường, nó có công dụng là xác ...
Thẻ base trong HTML
Cách sử dụng thẻ base trong html ...
Thẻ link trong HTML
Cách sử dụng thẻ html ...
Thẻ meta trong HTML
Cách sử dụng thẻ meta html ...
Thẻ script trong HTML
Cách sử dụng thẻ script html ...
Thẻ noscript trong HTML
Cách sử dụng thẻ noscript html ...
WORDPRESS
HTML Templates
Theme WordPress
Plugin WordPress
Lập trình WordPress
Thủ thuật WordPress
WEB HOSTING
Quản trị Linux
Thủ thuật Hosting
Kiến thức Domain
WEB FRONTEND
Javascript
AngularJS
jQuery
jQuery Mobile
HTML & CSS
Bootstrap
TypeScript
SASS CSS
VueJS
NestJS
Học ReactJS
WEB BACKEND
PHP
Codeigniter
Laravel
Phalcon
OpenCart
NodeJS
Blogspot
DATABASE
Học MySQL
Học MongoDB
CSDL căn bản
Học Oracle
Học SQL Server
Học SQLite
PROGRAMMING
Python
Java
Pascal
Học C#
Học Ruby
Học Swift
C / C++
Kotlin
Golang
Giải thuật
Visual Basic
MOBILE DEV
React Native
Học iOS
Android
CÔNG CỤ
Học Git
Testing
Control Panel
Dev Tool
FFmpeg
TIN HỌC
Excel
Word
PowerPoint
Access
Photoshop
MÔN HỌC
Tiếng Anh
Toán
Tiếng Nhật
Văn học
VIDEO
CSS Lab
PHP Lab
Giới thiệu
Giới thiệu Liên hệ Chính sách Điều khoản
Liên kết
Thủ thuật Download Game Ứng dụng Tin học Môn học ek88bet.asia thabet.ai SP666 Fun 567Live MMLive QQLive Hotlive
Link hay
BETVISA KÍCH NGAY TẶNG 100K miễn phí TÝ BỐI - TẶNG NGAY 50K khuyến mãi khủng
tải app 567 live show
Trang chủ chính thức Ae888
Trang chủ chính thức Thabet
Nhà cái //kubet8.us/
ĐK THABET nhận ngay 628k
kubet W88
kucasino.dev
Liên kết
kèo nhà cái KUBET88 f8bet Kubet88fun Ku casino KUBET Casino ae888 Ku casino cfun68