Hướng dẫn the table trong html

Nội dung chính

Nội dung chính Show

Các thẻ định nghĩa bảng trong HTML
Ví dụ về bảng trong HTML
Thuộc tính border của bảng trong HTML
1. Sử dụng thuộc tính border của bảng trong HTML
2. Sử dụng thuộc tính border trong CSS
Table trong HTML với cell padding
Thuộc tính colspan
Thuộc tính rowspan
Thẻ caption
Tạo style cho ô chẵn, lẻ

Table trong HTML
Các thẻ định nghĩa bảng trong HTML
Ví dụ về bảng trong HTML
Thuộc tính border của bảng trong HTML
- 1. Sử dụng thuộc tính border của bảng trong HTML
- 2. Sử dụng thuộc tính border trong CSS
Table trong HTML với cell padding
Thuộc tính colspan
Thuộc tính rowspan
Thẻ caption
Tạo style cho ô chẵn, lẻ

Thẻ table trong HTML được sử dụng để hiển thị dữ liệu ở dạng bảng (hàng * cột). Có thể có nhiều cột trong một hàng.

Các thẻ table trong HTML được sử dụng để quản lý việc bố cục trang web. Ví dụ: Phần tiêu đề, thanh điều hướng, nội dung trang, phần chân trang... Nhưng bạn nên sử dụng thẻ div thay vì table để quản lý bố cục của trang.

Các thẻ định nghĩa bảng trong HTML

Thẻ

Mô tả

để chỉ định thuộc tính cột cho mỗi cột.


Định nghĩa bảng.

Định nghĩa một hàng trong một bảng.
		Định nghĩa phần header (dòng đầu tiên) của bảng.
		Định nghĩa 1 ô của bảng.

Định nghĩa phụ đề bảng.

Chỉ định một nhóm của một hoặc nhiều cột trong một bảng để định dạng.

Được sử dụng với thẻ

Được sử dụng để nhóm nội dung body trong một bảng.

Được sử dụng để nhóm nội dung header trong một bảng.
	Được sử dụng để nhóm nội dung footer trong một bảng.

Ví dụ về bảng trong HTML

  
First_Name Last_Name Marks  
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

Output:

First_Name	Last_Name	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Chetna	Singh	72

Thuộc tính border của bảng trong HTML

Có hai cách để xác định border cho các bảng trong HTML.

Sử dụng thuộc tính border của bảng trong HTML.
Sử dụng thuộc tính border trong CSS.

1. Sử dụng thuộc tính border của bảng trong HTML

Bạn có thể sử dụng thuộc tính border của thẻ table trong HTML để chỉ định đường viền. Nhưng bạn không nên sử dụng cách này.

Ví dụ:

  
First_Name Last_Name Marks  
Sonoo Jaiswal 60  
James William 80  
Swati Sironi 82  
Chetna Singh 72

Output:

First_Name	Last_Name	Marks
Sonoo	Jaiswal	60
James	William	80
Swati	Sironi	82
Chetna	Singh	72

2. Sử dụng thuộc tính border trong CSS

Bạn nên sử dụng thuộc tính border của CSS để chỉ định đường viền của bảng.

Ví dụ:







   
 First_Name Last_Name Marks  
 Sonoo Jaiswal 60  
 James William 80  
 Swati Sironi 82  
 Chetna Singh 72

Output:

Table trong HTML với cell padding

Bạn có thể chỉ định padding cho tiêu đề của bảng và data của bảng bằng hai cách:

Bằng thuộc tính cellpadding của thẻ table trong HTML
Bằng tính chất padding trong CSS

Bạn nên sử dụng tính chất của CSS thay vì thuộc tính của thẻ trong HTML, dưới đây là ví dụ chỉ định padding cho tiêu đề và nội dung của bẳng bằng CSS.

Output:

Thuộc tính colspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn 1 cột, thì bạn có thể dùng thuộc tính colspan. Ví dụ:

Code css:

Code html:

  
    
    Name  
    Mobile No.  
    
    
    Ajeet Maurya  
    7503520801  
    9555879135

Output:

Thuộc tính rowspan

Nếu bạn muốn tạo một ô có độ dài lơn hơn hàng, thì bạn có thể dùng thuộc tính rowspan. Ví dụ:

Code css:

Code html:

  
    
    Name  
    Mobile No.  
    
    
    Ajeet Maurya  
    7503520801  
    9555879135

Output:

Thẻ caption

Thẻ caption được sử dụng để định nghĩa bảng, thẻ này chỉ được sử dụng ngay sau thẻ table. Ví dụ:

  
Student Records  
First_Name Last_Name Marks  
Vimal Jaiswal 70  
Mike Warn 60  
Shane Warn 42  
Jai Malhotra 62

Output:

Tạo style cho ô chẵn, lẻ

Code css:

Output:

Hướng dẫn the table trong html

Các thẻ định nghĩa bảng trong HTML

Ví dụ về bảng trong HTML

Thuộc tính border của bảng trong HTML

1. Sử dụng thuộc tính border của bảng trong HTML

2. Sử dụng thuộc tính border trong CSS

Table trong HTML với cell padding

Thuộc tính colspan

Thuộc tính rowspan

Thẻ caption

Tạo style cho ô chẵn, lẻ

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội