Cách tạo cột trong html

1) Các thẻ được sử dụng trong việc tạo bảng

- Thông thường, để tạo được một cái bảng thì chúng ta cần phải sử dụng bốn loại thẻ:

- Bước 1: Xác định một cái bảng

- Bước 2: Xác định số hàng nằm bên trong bảng.

- Bước 3: Xác định số ô nằm bên trong mỗi hàng.

(hàng đầu tiên có ba ô tiêu đề, ba hàng còn lại thì mỗi hàng có ba ô bình thường)

- Bước 1: Xác định một cái bảng

- Bước 2: Xác định số hàng nằm bên trong bảng.

- Bước 3: Xác định số ô nằm bên trong mỗi hàng.

- Bước 4: Xác định nội dung của từng ô.

   

      
Họ tên
      
Ngày sinh
      
Giới tính
   
   

      
Trần Anh Đức
      
03/08/1993
      
Nam
   
   

      
Kiều Thị Thu Hằng
      
04/09/1991
      
Nữ
   
   

      
Vương Thị Lê Na
      
06/10/1991
      
Nữ
   

- Bước 1: Xác định một cái bảng

- Bước 2: Xác định số hàng nằm bên trong bảng.

- Bước 3: Xác định số ô nằm bên trong mỗi hàng.

- Bước 4: Xác định nội dung của từng ô.

- Bước 5: Thiết lập thuộc tính border với giá trị 1 để tạo đường viền cho bảng và các ô.

   

      
Họ tên
      
Ngày sinh
      
Giới tính
   
   

      
Trần Anh Đức
      
03/08/1993
      
Nam
   
   

      
Kiều Thị Thu Hằng
      
04/09/1991
      
Nữ
   
   

      
Vương Thị Lê Na
      
06/10/1991
      
Nữ
   

3) Các thuộc tính được dùng trong việc tạo bảng

- Dưới đây là danh sách một số thuộc tính thường được áp dụng trong việc tạo bảng.

(các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính)

4) Cách gộp các ô bên trong bảng lại với nhau

- Thông thường, khi tạo một cái bảng thì số ô trên mỗi hàng phải bằng nhau. Tuy nhiên, có một vài trường hợp đặc biệt, chúng ta cần phải tạo ra những cái bảng mà số ô trên mỗi hàng có sự hơn kém nhau.

- Để làm được điều đó thì chúng ta cần phải gộp các ô lại với nhau.

4.1) Gộp các ô theo chiều ngang

- Để gộp các ô theo chiều ngang thì chúng ta đặt thuộc tính colspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía bên phải.

- Cú pháp:

colspan="số ô muốn gộp lại với nhau"

    

        
THÔNG TIN SINH VIÊN
    
    

        
Trần Anh Đức
        
03/08/1993
        
Nam
    
    

        
Kiều Thị Thu Hằng
        
04/09/1991
        
Nữ
    
    

        
Vương Thị Lê Na
        
06/10/1991
        
Nữ
    

Xem ví dụ

4.2) Gộp các ô theo chiều dọc

- Để gộp các ô theo chiều dọc thì chúng ta đặt thuộc tính rowspan vào bên trong thẻ mở của cái ô mà ta muốn bắt đầu gộp nó với những ô nằm phía dưới.

- Cú pháp:

rowspan="số ô muốn gộp lại với nhau"

    

        
LẬP TRÌNH WEB
        
HTML
    
    

        
CSS
    
    

        
JavaScript
    

Xem ví dụ

4.3) Tổng hợp một số ví dụ khác để rút kinh nghiệm

5) Tạo một cái tiêu đề cho bảng

- Để tạo một cái tiêu đề cho bảng thì chúng ta cần phải đặt thẻ