Hướng dẫn how do you define columns and rows in html? - làm thế nào để bạn xác định các cột và hàng trong html?

Bàn là gì?

Một bảng là một tập hợp dữ liệu có cấu trúc được tạo thành từ các hàng và cột [dữ liệu bảng]. Một bảng cho phép bạn nhanh chóng và dễ dàng tìm kiếm các giá trị biểu thị một số loại kết nối giữa các loại dữ liệu khác nhau, ví dụ như một người và tuổi của chúng, hoặc một ngày trong tuần hoặc thời gian biểu cho một bể bơi địa phương.tabular data]. A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

Các bảng được sử dụng rất phổ biến trong xã hội loài người, và đã được một thời gian dài, bằng chứng là tài liệu điều tra dân số Hoa Kỳ này từ năm 1800:

Do đó, không có gì lạ khi những người tạo HTML cung cấp một phương tiện để cấu trúc và trình bày dữ liệu bảng trên web.

Làm thế nào để một bàn hoạt động?

Điểm của một bảng là nó cứng nhắc. Thông tin dễ dàng được giải thích bằng cách thực hiện liên kết trực quan giữa các tiêu đề hàng và cột. Nhìn vào cái bàn dưới đây chẳng hạn và tìm thấy một người khổng lồ gas Jovian với 62 mặt trăng. Bạn có thể tìm thấy câu trả lời bằng cách liên kết các tiêu đề hàng và cột có liên quan.

  
    Data about the planets of our solar system [Planetary facts taken from
    Nasa's Planetary Fact Sheet - Metric].
  
  
    
      
      Name
      Mass [1024kg]
      Diameter [km]
      Density [kg/m3]
      Gravity [m/s2]
      Length of day [hours]
      Distance from Sun [106km]
      Mean temperature [°C]
      Number of moons
      Notes
    
  
  
    
      Terrestrial planets
      Mercury
      0.330
      4,879
      5427
      3.7
      4222.6
      57.9
      167
      0
      Closest to the Sun
    
    
      Venus
      4.87
      12,104
      5243
      8.9
      2802.0
      108.2
      464
      0
      
    
    
      Earth
      5.97
      12,756
      5514
      9.8
      24.0
      149.6
      15
      1
      Our world
    
    
      Mars
      0.642
      6,792
      3933
      3.7
      24.7
      227.9
      -65
      2
      The red planet
    
    
      Jovian planets
      Gas giants
      Jupiter
      1898
      142,984
      1326
      23.1
      9.9
      778.6
      -110
      67
      The largest planet
    
    
      Saturn
      568
      120,536
      687
      9.0
      10.7
      1433.5
      -140
      62
      
    
    
      Ice giants
      Uranus
      86.8
      51,118
      1271
      8.7
      17.2
      2872.5
      -195
      27
      
    
    
      Neptune
      102
      49,528
      1638
      11.0
      16.1
      4495.1
      -200
      14
      
    
    
      Dwarf planets
      Pluto
      0.0146
      2,370
      2095
      0.7
      153.3
      5906.4
      -225
      5
      
        Declassified as a planet in 2006, but this
        remains controversial.
      
    
  

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

Khi được triển khai chính xác, các bảng HTML được xử lý tốt bởi các công cụ tiếp cận như đầu đọc màn hình, do đó, bảng HTML thành công sẽ nâng cao trải nghiệm của người dùng bị nhìn thấy và khiếm thị.

Kiểu dáng bàn

Bạn cũng có thể có một cái nhìn vào ví dụ trực tiếp trên GitHub! Một điều bạn sẽ nhận thấy là bảng trông dễ đọc hơn một chút - điều này là do bảng bạn thấy ở trên trên trang này có kiểu dáng tối thiểu, trong khi phiên bản GitHub có CSS ​​quan trọng hơn được áp dụng.

Không có ảo ảnh; Để các bảng có hiệu quả trên web, bạn cần cung cấp một số thông tin kiểu dáng với CSS, cũng như cấu trúc rắn tốt với HTML. Trong mô -đun này, chúng tôi đang tập trung vào phần HTML; Để tìm hiểu về phần CSS, bạn nên truy cập bài viết về bảng kiểu của chúng tôi sau khi bạn hoàn thành ở đây.

Chúng tôi sẽ không tập trung vào CSS trong mô -đun này, nhưng chúng tôi đã cung cấp một bảng kiểu CSS tối thiểu để bạn sử dụng sẽ giúp các bảng của bạn dễ đọc hơn mặc định mà bạn nhận được mà không có bất kỳ kiểu dáng nào. Bạn có thể tìm thấy bảng kiểu ở đây và bạn cũng có thể tìm thấy một mẫu HTML áp dụng bảng kiểu - chúng cùng nhau sẽ cung cấp cho bạn một điểm khởi đầu tốt để thử nghiệm các bảng HTML.

Khi nào bạn không nên sử dụng bảng HTML?

Các bảng HTML nên được sử dụng cho dữ liệu bảng - đây là những gì chúng được thiết kế cho. Thật không may, rất nhiều người thường sử dụng các bảng HTML để trình bày các trang web, ví dụ: Một hàng để chứa tiêu đề, một hàng để chứa các cột nội dung, một hàng để chứa chân trang, v.v. Bạn có thể tìm thêm chi tiết và một ví dụ tại bố cục trang trong mô -đun học tập truy cập của chúng tôi. Điều này thường được sử dụng vì hỗ trợ CSS trên các trình duyệt từng là khủng khiếp; Bố cục bảng ngày nay ít phổ biến hơn nhiều, nhưng bạn vẫn có thể thấy chúng ở một số góc của web.

Nói tóm lại, sử dụng các bảng cho bố cục thay vì kỹ thuật bố cục CSS là một ý tưởng tồi. Những lý do chính như sau:

1. Các bảng bố cục giảm khả năng truy cập cho người dùng khiếm thị: đầu đọc màn hình, được sử dụng bởi người mù, giải thích các thẻ tồn tại trong trang HTML và đọc nội dung cho người dùng. Bởi vì các bảng không phải là công cụ phù hợp để bố trí và đánh dấu phức tạp hơn so với các kỹ thuật bố cục CSS, đầu ra của đầu đọc màn hình sẽ gây nhầm lẫn cho người dùng của họ.: screen readers, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screen readers' output will be confusing to their users.
2. Các bảng sản xuất súp thẻ: Như đã đề cập ở trên, bố cục bảng thường liên quan đến các cấu trúc đánh dấu phức tạp hơn so với các kỹ thuật bố trí thích hợp. Điều này có thể dẫn đến việc mã khó viết hơn, duy trì và gỡ lỗi.: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
3. Các bảng không tự động đáp ứng: khi bạn sử dụng các thùng chứa bố cục thích hợp [chẳng hạn như

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   5,

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   6,

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   7 hoặc

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   8], chiều rộng của chúng mặc định là 100% phần tử cha của chúng. Mặt khác, các bảng có kích thước theo nội dung của chúng theo mặc định, vì vậy cần có các biện pháp bổ sung để có được kiểu bố trí bảng để hoạt động hiệu quả trên nhiều thiết bị khác nhau.: When you use proper layout containers [such as

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   5,

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   6,

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   7, or

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   8], their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.

Học tập tích cực: Tạo bảng đầu tiên của bạn

Chúng tôi đã nói về lý thuyết bảng đủ, vì vậy, hãy đi sâu vào một ví dụ thực tế và xây dựng một bảng đơn giản.

1. Trước hết, hãy tạo một bản sao cục bộ của bảng trống.html và bảng tối thiểu.css trong một thư mục mới trên máy cục bộ của bạn.
2. Nội dung của mỗi bảng được bao quanh bởi hai thẻ sau:

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   9. Thêm những thứ này bên trong cơ thể của HTML của bạn.

   table {
     border-collapse: collapse;
     border: 2px solid black;
   }
   
   th,
   td {
     padding: 5px;
     border: 1px solid black;
   }
   

   9. Add these inside the body of your HTML.
3. Container nhỏ nhất bên trong bảng là một ô bảng, được tạo bởi phần tử

   Hi, I'm your first cell.
   

   0 ['TD' là viết tắt của 'dữ liệu bảng']. Thêm phần sau bên trong thẻ bảng của bạn:

   Hi, I'm your first cell.
   

   0 element ['td' stands for 'table data']. Add the following inside your table tags:

   Hi, I'm your first cell.
   

4. Nếu chúng ta muốn một hàng bốn ô, chúng ta cần sao chép các thẻ này ba lần. Cập nhật nội dung của bảng của bạn trông giống như vậy:

   Hi, I'm your first cell.
   I'm your second cell.
   I'm your third cell.
   I'm your fourth cell.
   

Như bạn sẽ thấy, các ô không được đặt bên dưới nhau, thay vào đó chúng tự động được liên kết với nhau trên cùng một hàng. Mỗi phần tử

Hi, I'm your first cell.

Để dừng hàng này phát triển và bắt đầu đặt các ô tiếp theo vào hàng thứ hai, chúng ta cần sử dụng phần tử

Hi, I'm your first cell.

Hi, I'm your first cell.

1. Đặt bốn ô bạn đã tạo bên trong các thẻ

   Hi, I'm your first cell.
   

   2, như vậy:

   
     Hi, I'm your first cell.
     I'm your second cell.
     I'm your third cell.
     I'm your fourth cell.
   
   

2. Bây giờ bạn đã thực hiện một hàng, hãy thực hiện thêm một hoặc hai - mỗi hàng cần được bọc trong một phần tử

   Hi, I'm your first cell.
   

   2 bổ sung, với mỗi ô chứa trong

   Hi, I'm your first cell.
   

   0.

Kết quả

Điều này sẽ dẫn đến một bảng trông giống như sau:

  
    Hi, I'm your first cell.
    I'm your second cell.
    I'm your third cell.
    I'm your fourth cell.
  

  
    Second row, first cell.
    Cell 2.
    Cell 3.
    Cell 4.
  

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

Cho phép các ô trải rộng nhiều hàng và cột

Đôi khi chúng tôi muốn các ô trải rộng nhiều hàng hoặc cột. Lấy ví dụ đơn giản sau đây, cho thấy tên của các động vật phổ biến. Trong một số trường hợp, chúng tôi muốn hiển thị tên của nam và nữ bên cạnh tên động vật. Đôi khi chúng ta không, và trong những trường hợp như vậy, chúng ta chỉ muốn tên động vật trải dài toàn bộ bảng.

Đánh dấu ban đầu trông như thế này:

  
    Animals
  
  
    Hippopotamus
  
  
    Horse
    Mare
  
  
    Stallion
  
  
    Crocodile
  
  
    Chicken
    Hen
  
  
    Rooster
  

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

Nhưng đầu ra không cung cấp cho chúng tôi những gì chúng tôi muốn:

Chúng ta cần một cách để có được "động vật", "hà mã" và "cá sấu" để trải dài trên hai cột, và "ngựa" và "gà" để trải dài trên hai hàng. May mắn thay, các tiêu đề và ô bảng có các thuộc tính

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hãy sử dụng

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

1. Đầu tiên, tạo một bản sao cục bộ của các tệp động vật của chúng tôi.html và các tệp tối thiểu .css trong một thư mục mới trên máy cục bộ của bạn. HTML chứa ví dụ giống như động vật như bạn đã thấy ở trên.
2. Tiếp theo, sử dụng

   Hi, I'm your first cell.
   I'm your second cell.
   I'm your third cell.
   I'm your fourth cell.
   

   1 để tạo ra "Động vật", "Hippopotamus" và "Cá sấu" trải dài trên hai cột.
3. Cuối cùng, sử dụng

   Hi, I'm your first cell.
   I'm your second cell.
   I'm your third cell.
   I'm your fourth cell.
   

   2 để tạo ra "ngựa" và "gà" trải dài trên hai hàng.
4. Lưu và mở mã của bạn trong trình duyệt để xem sự cải thiện.

Cung cấp kiểu dáng chung cho các cột

Kiểu dáng mà không có

Có một tính năng cuối cùng chúng tôi sẽ cho bạn biết trong bài viết này trước khi chúng tôi tiếp tục. HTML có một phương pháp xác định thông tin kiểu dáng cho toàn bộ cột dữ liệu tất cả ở một nơi - các phần tử

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.

Hi, I'm your first cell.

  Hi, I'm your first cell.
  I'm your second cell.
  I'm your third cell.
  I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.

Hi, I'm your first cell.

  Hi, I'm your first cell.
  I'm your second cell.
  I'm your third cell.
  I'm your fourth cell.

Lấy ví dụ đơn giản sau:

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

Điều này cho chúng ta kết quả sau:

Điều này không lý tưởng, vì chúng ta phải lặp lại thông tin kiểu dáng trên cả ba ô trong cột [chúng ta có thể có một

  Hi, I'm your first cell.
  I'm your second cell.
  I'm your third cell.
  I'm your fourth cell.

Kiểu dáng với

Thay vì làm điều này, chúng tôi có thể chỉ định thông tin một lần, trên một yếu tố

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

  Hi, I'm your first cell.
  I'm your second cell.
  I'm your third cell.
  I'm your fourth cell.

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

Thực tế, chúng tôi đang xác định hai "cột kiểu", một chỉ định thông tin kiểu dáng cho mỗi cột. Chúng tôi không tạo kiểu cho cột đầu tiên, nhưng chúng tôi vẫn phải bao gồm một yếu tố

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Nếu chúng tôi muốn áp dụng thông tin kiểu dáng cho cả hai cột, chúng tôi chỉ có thể bao gồm một phần tử

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  padding: 5px;
  border: 1px solid black;
}

Giống như

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

Hi, I'm your first cell.
I'm your second cell.
I'm your third cell.
I'm your fourth cell.

  
    Hi, I'm your first cell.
    I'm your second cell.
    I'm your third cell.
    I'm your fourth cell.
  

  
    Second row, first cell.
    Cell 2.
    Cell 3.
    Cell 4.
  

Học tập tích cực: colgroup và col

Bây giờ là lúc để tự mình đi.

Dưới đây bạn có thể thấy thời gian biểu của một giáo viên ngôn ngữ. Vào thứ Sáu, cô có một lớp học mới giảng dạy Hà Lan cả ngày, nhưng cô cũng dạy tiếng Đức trong một vài khoảng thời gian vào thứ ba và thứ năm. Cô ấy muốn làm nổi bật các cột chứa những ngày cô ấy đang dạy.

Tái tạo bảng bằng cách làm theo các bước dưới đây.

1. Đầu tiên, tạo một bản sao cục bộ của tệp thời gian của chúng tôi.html trong một thư mục mới trên máy cục bộ của bạn. HTML chứa cùng một bảng bạn thấy ở trên, trừ thông tin kiểu dáng cột.
2. Thêm phần tử

   Hi, I'm your first cell.
   I'm your second cell.
   I'm your third cell.
   I'm your fourth cell.
   

   9 ở đầu bảng, ngay bên dưới thẻ

   
     Hi, I'm your first cell.
     I'm your second cell.
     I'm your third cell.
     I'm your fourth cell.
   
   

   7, trong đó bạn có thể thêm các phần tử

   Hi, I'm your first cell.
   I'm your second cell.
   I'm your third cell.
   I'm your fourth cell.
   

   8 của mình [xem các bước còn lại bên dưới].
3. Hai cột đầu tiên cần phải được để không được bảo vệ.
4. Thêm một màu nền vào cột thứ ba. Giá trị cho thuộc tính

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   6 của bạn là

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   7
5. Đặt một chiều rộng riêng biệt trên cột thứ tư. Giá trị cho thuộc tính

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   6 của bạn là

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   9
6. Thêm một màu nền vào cột thứ năm. Giá trị cho thuộc tính

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   6 của bạn là

   table {
     border-collapse: collapse;
   }
   td,
   th {
     border: 1px solid black;
     padding: 10px 20px;
   }
   

   1
7. Thêm một màu nền khác cộng với một đường viền vào cột thứ sáu, để biểu thị rằng đây là một ngày đặc biệt và cô ấy đang dạy một lớp mới. Các giá trị cho thuộc tính

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   6 của bạn là

   table {
     border-collapse: collapse;
   }
   td,
   th {
     border: 1px solid black;
     padding: 10px 20px;
   }
   

   3
8. Hai ngày qua là những ngày tự do, vì vậy chỉ cần đặt chúng ở không có màu nền mà là chiều rộng được đặt; Giá trị cho thuộc tính

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   6 là

   
     
       Hi, I'm your first cell.
       I'm your second cell.
       I'm your third cell.
       I'm your fourth cell.
     
   
     
       Second row, first cell.
       Cell 2.
       Cell 3.
       Cell 4.
     
   
   

   9

Xem cách bạn tiếp tục với ví dụ. Nếu bạn bị mắc kẹt hoặc muốn kiểm tra công việc của mình, bạn có thể tìm thấy phiên bản của chúng tôi trên GitHub dưới dạng thời gian biểu cố định.html [xem nó cũng trực tiếp].

Bản tóm tắt

Điều đó chỉ kết thúc những điều cơ bản của các bảng HTML. Trong bài viết tiếp theo, chúng tôi sẽ xem xét một số tính năng bảng nâng cao hơn một chút và bắt đầu nghĩ rằng họ có thể truy cập như thế nào đối với những người khiếm thị.

• Tổng quan: Bảng
• Tiếp theo

Trong mô -đun này