Bảng tiêu đề html

Hiện nay để xây dựng bố cục của một trang web thì có thể CSS là ngôn ngữ được sử dụng phổ biến nhất. Tuy nhiên trước đây khi CSS còn chưa phổ biến thì cách đơn giản nhất để tạo ra các bố cục đang sử dụng thẻ trong HTML. Go to the tagcó cấu trúc như thế nào? . Đi nào

1. Cấu trúc cơ bản của bảng thẻ

Như chúng ta thường thấy một bảng (table) thông thường bao gồm các hàng và các cột khác nhau. Trong HTML cũng vậy. To show an table we used tag

, bên trong bảng đó, bao gồm các hàng được biểu thị bằng thẻ và các cột được biểu thị bằng thẻ. Lưu ý bên trong thẻ thì chỉ có thể có thẻ. Ví dụ

Kết quả

Bảng tiêu đề html

Một bảng được tạo ra với 2 hàng 3 cột

Một số trình duyệt tự động sinh ra các đường viền bao quanh các hàng, cột, bảng. Bạn cũng có thể thêm tùy chọn trang trí bảng tùy chọn bằng các thuộc tính như sau


	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		123456
	


Bảng tiêu đề html

2. Cách sắp xếp các cột và hàng trong bảng

Để tùy chỉnh số ô của từng cột và từng hàng chúng ta sử dụng thuộc tính colspan và rowspan. Thuộc tính colspan giúp chúng ta khai thác các ô gần nhau của các cột. Ví dụ


	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		Hàng 1 cột 1 + hàng 1 cột 23456
	


Để sắp 2 ô Cạnh nhau (ô 1 và ô 2 ) trên 2 cột khác nhau ( cột 1 và cột 2) ta đặt thuộc tính colspan tại ô đầu tiên từ bên trái qua ( ô 1 cột 1) sau đó xóa ô liền kề

Bảng tiêu đề html

Kết quả

Bảng tiêu đề html

Khi thiết lập colspan = "2", ô của hàng đầu tiên sẽ mở rộng ra bằng 2 cột. Nếu bạn thiết lập colspan = "3", ô sẽ mở rộng ra thành 3 cột. Tương tự ta có thể vượt qua các ô cạnh nhau của các hàng. Dưới đây chúng ta sẽ mở rộng ô 1 của hàng 1 và ô 4 của hàng 2 thành ô 1


	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		1+42356
	


Kết quả

Bảng tiêu đề html

3. Cách sử dụng , , trong bảng thẻ

Có ba thẻ giúp phân biệt giữa nội dung chính của bảng với các hàng đầu tiên và cuối cùng (có thể chứa các nội dung khác nhau). Những thẻ này giúp chúng ta tạo ra bố cục phù hợp với nội dung từ đó làm cho người đọc dễ hiểu. Ví dụ


	Thẻ Table Trong HTML
	


	
	   
	   
 	   
 			
 			
 			
 		
 		
 			
 			
 			
 		
	   
 	   
	   
		
			Cột 1
			Cột 2
			Cột 3
		
		123456
		
			1+4=5
			2+5=7
			3+6=9
		
	


Kết quả

Bảng tiêu đề html

in which

  • Tiêu đề của từng cột nằm bên trong thẻ
  • Phần thân sẽ nằm trong thẻ
  • Phần kết luận sẽ nằm trong phần tử

Tuy nhiên, hiện tại các nhà thiết kế thường sử dụng CSS để thay đổi giao diện của chúng. Chúng ta sẽ được học ở bài CSS

Vì vậy, trong bài học này, chúng ta đã tìm hiểu cách thêm một bảng vào trong một trang web rồi đúng không nào. Để có thể thiết kế bố cục hoàn toàn bằng bảng trong HTML, bạn có thể xem video hướng dẫn tại đây. Chúc các bạn học tốt

Để tạo bảng trong HTML, chúng ta sử dụng bảng thẻ. Bảng được tạo bởi các dòng (hàng) và các cột (cột). Để tạo hàng chúng ta sử dụng thẻ tr và để tạo bảng chúng ta sử dụng thẻ td

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

Bảng tiêu đề html

  • Nếu như chúng ta không muốn có đường viền trong bảng thì chúng ta thiết lập thuộc tính border = 0

2. bảng tiêu đề

Chúng ta tạo tiêu đề cho bảng bằng cách sử dụng thẻ thứ như sau

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


   
      HTML Table Header
   
   
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
         
            Shabbir Hussein
            7000
         
      
   
   

Bảng tiêu đề html

3. Khoảng cách dòng và cột

Chúng ta có thể thiết lập khoảng cách giữa các ô trong bảng bằng cách sử dụng 2 thuộc tính cellpadding và cellspacing

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


   
      HTML Table Cellpadding
   
   
   
      
         
            Name
            Salary
         
         
            Ramesh Raman
            5000
         
         
            Shabbir Hussein
            7000
         
      
   
   

Bảng tiêu đề html

4. Sắp xếp các dòng và cột

Chúng ta có thể hợp nhất các dòng và cột bằng cách sử dụng thuộc tính colspan và rowspan như sau


	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		Hàng 1 cột 1 + hàng 1 cột 23456
	


0

	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		Hàng 1 cột 1 + hàng 1 cột 23456
	


1

Bảng tiêu đề html

5. Thiết lập chiều cao và chiều dài cho bảng

Chúng ta sử dụng thuộc tính chiều rộng và chiều cao để xác định chiều cao và chiều rộng cho bảng

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

	Thẻ Table Trong HTML
	


	
 		
 			
 			
 			
 		
 		
 			
 			
 			
 		Hàng 1 cột 1 + hàng 1 cột 23456
	


3

6. Tiêu đề cho bảng

Chúng ta có thể thêm tiêu đề cho bảng bằng thuộc tính chú thích như sau



   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

0


   
      HTML Tables
   
   
   
      
         
            Row 1, Column 1
            Row 1, Column 2
         
         
         
            Row 2, Column 1
            Row 2, Column 2
         
      
      
   

1

Bảng tiêu đề html

Chúng ta sử dụng thead để tạo tiêu đề trong bảng, tbody để chỉ nội dung bên trong bảng và tfoot để tạo chân trang