programming html

Bảng hàng HTML

Thẻ table trong HTML 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

Chúng ta có thể tạo một bảng để hiển thị dữ liệu ở dạng bảng, sử dụng phần tử, với sự trợ giúp của thẻ, tiêu đề bảng được xác định bởi

, và phần tử

Trong mỗi bảng, hàng của bảng được xác định bởi

, và dữ liệu bảng được định nghĩa bởi các thẻ phụ

Các bảng HTML được sử dụng để quản lý bố cục của trang e. g. phần tiêu đề, thanh điều hướng, nội dung cơ thể, phần chân trang, v.v. Nhưng nên sử dụng thẻ div over table để quản lý bố cục của trang

Thẻ bảng HTML

TagDescriptionelement để chỉ định thuộc tính cột cho mỗi cột. Nó định nghĩa một bảng. Nó xác định một hàng trong một bảng. Nó xác định một ô tiêu đề trong một bảng. Nó định nghĩa một ô trong bảng. Nó xác định chú thích bảng. Nó chỉ định một nhóm gồm một hoặc nhiều cột trong bảng để định dạng. Nó được sử dụng với Nó được sử dụng để nhóm nội dung cơ thể trong một bảng. Nó được sử dụng để nhóm nội dung tiêu đề trong một bảng. Nó được sử dụng để nhóm nội dung chân trang trong một bảng

Ví dụ về bảng HTML

Hãy xem ví dụ về thẻ bảng HTML. Đầu ra của nó được hiển thị ở trên

Kiểm tra nó ngay bây giờ

đầu ra

First_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

Trong bảng html trên, có 5 hàng và 3 cột = 5 * 3 = 15 giá trị

Bảng HTML có viền

Có hai cách để chỉ định đường viền cho bảng HTML

Theo thuộc tính đường viền của bảng trong HTML
Theo thuộc tính đường viền trong CSS

1] Thuộc tính Đường viền HTML

Bạn có thể sử dụng thuộc tính đường viền của thẻ bảng trong HTML để chỉ định đường viền. Nhưng nó không được khuyến khích bây giờ

Kiểm tra nó ngay bây giờ

đầu ra

First_NameLast_NameMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

2] Thuộc tính Đường viền CSS

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

Kiểm tra nó ngay bây giờ

Bạn có thể thu gọn tất cả các đường viền trong một đường viền bằng thuộc tính sập viền. Nó sẽ thu gọn biên giới thành một

Kiểm tra nó ngay bây giờ

đầu ra

TênHọMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

Bảng HTML có đệm ô

Bạn có thể chỉ định phần đệm cho tiêu đề bảng và dữ liệu bảng theo hai cách

Theo thuộc tính cellpadding của bảng trong HTML
Bằng cách đệm thuộc tính trong CSS

Thuộc tính cellpadding của thẻ bảng HTML hiện đã lỗi thời. Nên sử dụng CSS. Vì vậy, hãy xem mã của CSS

Kiểm tra nó ngay bây giờ

đầu ra

TênHọMarksSonooJaiswal60JamesWilliam80SwatiSironi82ChetnaSingh72

Chiều rộng bảng HTML

Chúng ta có thể chỉ định chiều rộng của bảng HTML bằng cách sử dụng thuộc tính chiều rộng CSS. Nó có thể được chỉ định bằng pixel hoặc tỷ lệ phần trăm

Chúng tôi có thể điều chỉnh chiều rộng bảng theo yêu cầu của chúng tôi. Sau đây là ví dụ để hiển thị bảng có chiều rộng

Ví dụ

Kiểm tra nó ngay bây giờ

đầu ra

Bảng HTML với colspan

Nếu bạn muốn tạo một ô kéo dài nhiều hơn một cột, bạn có thể sử dụng thuộc tính colspan

Nó sẽ chia một ô/hàng thành nhiều cột và số lượng cột phụ thuộc vào giá trị của thuộc tính colspan

Tài liệu và ví dụ về kiểu dáng bảng chọn tham gia [do chúng được sử dụng phổ biến trong các plugin JavaScript] với Bootstrap

ví dụ

Do việc sử dụng rộng rãi các bảng trên các tiện ích của bên thứ ba như lịch và bộ chọn ngày, chúng tôi đã thiết kế các bảng của mình để được chọn tham gia. Chỉ cần thêm lớp cơ sở


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

6 vào bất kỳ


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

4 nào


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

Tùy chọn đầu bảng

Tương tự với bảng và bảng tối, sử dụng các lớp sửa đổi


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

9 hoặc


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

0 để làm cho s có màu xám nhạt hoặc tối

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

hàng sọc

Sử dụng


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter
    
  



  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

1 để thêm sọc vằn vào bất kỳ hàng nào trong bảng

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter

#FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter


  
    
      #
      First
      Last
      Handle
    
  
  
    
      1
      Mark
      Otto
      @mdo
    
    
      2
      Jacob
      Thornton
      @fat
    
    
      3
      Larry
      the Bird
      @twitter