Bài tập tạo bảng trong html

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.

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
Step 1: tạo cấu trúc chuẩn file HTML5
Step 2: phân tích bố cục (layout) tổng thể
2.1. Chúng ta sẽ chia bố cục (layout) như sau:
2.2. Gom các dòng, cột theo bố cục đã phân tích
2.3. Hiệu chỉnh định dạng bảng tính, chiều cao, chiều rộng các dòng, cột theo yêu cầu
2.4. Canh lề nội dung trong ô
Step 3: phân tích bố cục (layout) chi tiết

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ảĐịnh nghĩa bảng.Định nghĩa một hàng trong một 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ẻ để chỉ định thuộc tính cột cho mỗi cột.Đượ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

Định nghĩa phụ đề 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.

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

Output:

First_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

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_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

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.

Yêu cầu

Tạo bố cục (layout) trang web sử dụng thẻ TABLE (table tag) như hình sau:

Step 1: tạo cấu trúc chuẩn file HTML5

Tạo file: layout-website.html
Nội dung file:




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

Step 2: phân tích bố cục (layout) tổng thể

Có nhiều cách để phân tích bố cục (layout) tùy theo trí tưởng tượng/sáng tạo của mỗi người. Cách đơn giản nhất là:

Chia tổng số dòng và số cột nhiều nhất có thể.
Sau đó gom cột (colspan) hay gom dòng (rowspan) từ từ lại.

Bước đầu thực hiện bố cục (layout) của trang web, cần phải vẽ ra giấy để hình dung được bố cục (layout) tổng thể của trang web. Sau khi phân tích, ta có bố cục (layout) như hình sau:

2.1. Chúng ta sẽ chia bố cục (layout) như sau:

Có tổng cộng nhiều nhất là 6 dòng và 3 cột.
Hiệu chỉnh nội dung file code như sau:




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

2.2. Gom các dòng, cột theo bố cục đã phân tích

Vùng chứa nội dung HEADER chúng ta sẽ gom 3 cột lại.
Vùng chứa nội dung MENU NGANG chúng ta sẽ gom 3 cột lại.
Vùng chứa nội dung SLIDER chúng ta sẽ gom 2 cột lại.
Vùng chứa nội dung SIDEBAR, chúng ta sẽ gom 2 dòng lại.
Vùng chứa nội dung FOOTER 1, FOOTER 2, FOOTER 3, chúng ta sẽ gom 2 dòng lại.
Vùng chứa nội dung BẢN QUYỀN, chúng ta sẽ gom 3 cột lại.

Hiệu chỉnh nội dung file code như sau:




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
    
    
      MENU NGANG
    
    
      SIDEBAR
      SLIDER
    
    
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

2.3. Hiệu chỉnh định dạng bảng tính, chiều cao, chiều rộng các dòng, cột theo yêu cầu

Hiệu chỉnh cho khoảng cách giữa các ô table nhỏ lại để đường nét được nhỏ hơn, sử dụng thuộc tính cellspacing="? px" cho thẻ




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

0 cho thẻ

Hiệu chỉnh chiều rộng sử dụng thuộc tính




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

1 cho thẻ

Tô màu nền sử dụng thuộc tính




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

2 cho thẻ




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
    
    
      MENU NGANG
    
    
      SIDEBAR
      SLIDER
    
    
      
        SẢN PHẨM NỔI BẬT 1
        

        

        

        

        

      
      
        SẢN PHẨM NỔI BẬT 2
        

        

        

        

        

      
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

2.4. Canh lề nội dung trong ô

Canh lề theo chiều ngang: sử dụng thuộc tính




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

3 cho thẻ

Canh lề theo chiều dọc: sử dụng thuộc tính




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
      
      
    
    
      MENU NGANG
      
      
    
    
      SIDEBAR
      SLIDER
      
    
    
      
      SẢN PHẨM NỔI BẬT 1
      SẢN PHẨM NỔI BẬT 2
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

4 cho thẻ




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
    
    
      MENU NGANG
    
    
      SIDEBAR
      SLIDER
    
    
      
        SẢN PHẨM NỔI BẬT 1
        

        

        

        

        

      
      
        SẢN PHẨM NỔI BẬT 2
        

        

        

        

        

      
    
    
      THÔNG TIN CÔNG TY
      Các đường link FOOTER 1 2 3
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

Step 3: phân tích bố cục (layout) chi tiết

1 dòng và 3 cột.
Có chiều rộng width = 100% chiều rộng của cột cha chứa nó.




  Nền tảng căn bản về HTML5 đầu tiên - nentang.vn
  
  
  



  Bố cục trang web Sử dụng thẻ TABLE đơn giản

  
    
      HEADER
    
    
      MENU NGANG
    
    
      SIDEBAR
      SLIDER
    
    
      
        SẢN PHẨM NỔI BẬT 1
        

        

        

        

        

      
      
        SẢN PHẨM NỔI BẬT 2
        

        

        

        

        

      
    
    
      THÔNG TIN CÔNG TY
      
      
        
          
            Các đường link FOOTER 1
            Các đường link FOOTER 2
            Các đường link FOOTER 3
          
        
      
      
    
    
      
        Bản quyền bởi © 2020 bởi NenTang.vn

        ® Giấy phép đăng ký Kinh doanh số 001 do Sở KHĐT CT cấp ngày 01/01/2020

        Địa chỉ: Ninh Kiều, TP Cần Thơ - SĐT: 0915-659-223 - Email: [email protected]

programming html

Bài tập tạo bảng 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

Yêu cầu

Step 1: tạo cấu trúc chuẩn file HTML5

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Step 2: phân tích bố cục (layout) tổng thể

2.1. Chúng ta sẽ chia bố cục (layout) như sau:

Bố cục trang web Sử dụng thẻ TABLE đơn giản

2.2. Gom các dòng, cột theo bố cục đã phân tích

Bố cục trang web Sử dụng thẻ TABLE đơn giản

2.3. Hiệu chỉnh định dạng bảng tính, chiều cao, chiều rộng các dòng, cột theo yêu cầu

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Bố cục trang web Sử dụng thẻ TABLE đơn giản

2.4. Canh lề nội dung trong ô

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Bố cục trang web Sử dụng thẻ TABLE đơn giản

Step 3: phân tích bố cục (layout) chi tiết

Bố cục trang web Sử dụng thẻ TABLE đơn giản

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