Bài 28: Thuộc Tính Cellspacing Và Cellpadding Là Gì, Cellpadding Là Gì

Table là một định dạng dùng để hiển thị tài liệu ở dạng list. Mỗi table sẽ được chia ra gồm hai thành phần là cột với hàng, và được tạo thành bởi những thẻ table, tr, td, tbody, thead, tfoot. Bạn đang xem : Cellpadding là gì

1. Định dạng HTML table đơn giản

Cách đơn thuần nhất để tạo table là tuân theo cú pháp sau : XEM DEMO 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 table Thuộ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ền Thuộc tính cellpadding=”5″ là khai báo khoảng cách giữa nội dung trong ô so với đường viền Nếu muốn thêm một cột thì chỉ việc bổ sung một td Nếu muốn thêm một hàng thì chỉ việc bổ sung một tr Thuộc tính border = ” 1 ” là khai báo đường viền của table Thuộ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ền Thuộc tính cellpadding = ” 5 ” là khai báo khoảng cách giữa nội dung trong ô so với đường viền Nếu muốn thêm một cột thì chỉ việc bổ trợ một td Nếu muốn thêm một hàng thì chỉ việc bổ trợ một trBạn hãy thử biến hóa những thông số kỹ thuật để kiểm thử nhé .Bạn đang xem : Cellpadding là gì

2. Thuộc tính colspan và rowspan trong Table

Colspan: Thuộc tính colspan dùng để nối hai hoặc nhiều ô với nhau tính từ ô đặt thẻ này đi tới phía trước.

*

Ví dụ: XEM DEMO

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

Rowspan: Thuộc tính rowspan dùng để nối hai hoặc nhiêu ô với nhau tính từ ô đặt thẻ đi xuống phía dưới.

*

Ví dụ: XEM DEMO

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 ra làm ba thành phần chính đó là header, body và footer tương ứng với nhóm thẻ thead, tbody và tfoot.

Xem thêm: Spirometry là gì

*

Ví dụ: XEM DEMO

Username Email TheHalfheart TheHalfHeartgmail.com Freetuts Freetuts.netgmail.com Username Email

Ví dụ: XEM DEMO

TheHalfheart TheHalfHeartgmail.com Freetuts Freetuts.netgmail.com Username Email Username Email

Chạy lên giao diện vẫn bình thường. Điều đặc biệt ở đây đó là đáng lẽ ra theo luật 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í của nó. Đ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.

Xem thêm : Dưỡng Da Mùa Lạnh – Bí Quyết Chăm Sóc Da Mùa Đông Này Hiệu Quả Nhất

4. Lời kết

Như vậy trong bài này mình đã trình làng đến những thẻ HTML tương quan đến table. Điều quan tâm 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 những 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 serie này. Bài sau Bài tiếp Chuyên đề học lập trình web: Học phần HTML / CSS Bài sau Bài tiếp Chuyên đề học lập trình web : Học phần HTML / CSSĐây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này tất cả chúng ta sẽ học HTML và CSS trước. Tải Thêm Comment

DANH SÁCH BÀI HỌC

HTML – Định nghĩa HTML – Elements và Attributes HTML – Định dạng văn bản HTML – Heading và List HTML – Table HTML – Tạo link HTML – Tạo ảnh HTML – Tích hợp CSS Danh sách chủ đề Học HTML Học HTML5 HTML5 Canvas Học CSS Học CSS3 CSS Responsive Web Design How to Hiệu ứng Parallax Các thẻ HTML MÃ GIẢM GIÁ Unica 50% Lấy Mã TinoHost 30% Lấy Mã INET 30% Lấy Mã

Liên hệ

Giới thiệu Chính sách Điều khoản Liên hệ Guest Post

Mã giảm giá

TinoHost Azdigi Vultr Hawkhost Stablehost

Khóa học

Javascript Front-end NodeJS React JS Fullstack

Giới thiệu

Tải Thêm CommentHTML – Định nghĩa HTML – Elements và Attributes HTML – Định dạng văn bản HTML – Heading và List HTML – Table HTML – Tạo link HTML – Tạo ảnh HTML – Tích hợp CSS Danh sách chủ đề Học HTML Học HTML5 HTML5 Canvas Học CSS Học CSS3 CSS Responsive Web Design How to Hiệu ứng Parallax Các thẻ HTML MÃ GIẢM GIÁ Unica 50 % Lấy Mã TinoHost 30 % Lấy Mã INET 30 % Lấy MãGiới thiệu Chính sách Điều khoản Liên hệ Guest PostTinoHost Azdigi Vultr Hawkhost StablehostJavascript Front-end NodeJS React JS Fullstack

Admin Cường, quản lý chính của website.

*
BÀI VIẾT

Nếu bạn phát hiện lỗi sai link, nội dung sai, hay một lỗi bất kì nào đó trên trang này thì hãy cho mình biết nhé. Cám ơn bạn!

Source: https://lava.com.vn
Category: Hỏi Đáp