Làm cách nào để tôi chỉ in một bảng trong html?

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 dạng bảng). Một bảng cho phép bạn tra cứu nhanh chóng và dễ dàng 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ụ: một người và tuổi của họ, 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

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

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

Điểm của một cái bàn là nó cứng nhắc. Thông tin được giải thích dễ dàng bằng cách tạo liên kết trực quan giữa tiêu đề hàng và cột. Ví dụ, nhìn vào bảng dưới đây và tìm một hành tinh khí khổng lồ 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

<table>
  <caption>
    Data about the planets of our solar system (Planetary facts taken from
    <a href="https://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metrica>).
  caption>
  <thead>
    <tr>
      <td colspan="2">td>
      <th scope="col">Nameth>
      <th scope="col">Mass (10<sup>24sup>kg)th>
      <th scope="col">Diameter (km)th>
      <th scope="col">Density (kg/m<sup>3sup>)th>
      <th scope="col">Gravity (m/s<sup>2sup>)th>
      <th scope="col">Length of day (hours)th>
      <th scope="col">Distance from Sun (10<sup>6sup>km)th>
      <th scope="col">Mean temperature (°C)th>
      <th scope="col">Number of moonsth>
      <th scope="col">Notesth>
    tr>
  thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planetsth>
      <th scope="row">Mercuryth>
      <td>0.330td>
      <td>4,879td>
      <td>5427td>
      <td>3.7td>
      <td>4222.6td>
      <td>57.9td>
      <td>167td>
      <td>0td>
      <td>Closest to the Suntd>
    tr>
    <tr>
      <th scope="row">Venusth>
      <td>4.87td>
      <td>12,104td>
      <td>5243td>
      <td>8.9td>
      <td>2802.0td>
      <td>108.2td>
      <td>464td>
      <td>0td>
      <td>td>
    tr>
    <tr>
      <th scope="row">Earthth>
      <td>5.97td>
      <td>12,756td>
      <td>5514td>
      <td>9.8td>
      <td>24.0td>
      <td>149.6td>
      <td>15td>
      <td>1td>
      <td>Our worldtd>
    tr>
    <tr>
      <th scope="row">Marsth>
      <td>0.642td>
      <td>6,792td>
      <td>3933td>
      <td>3.7td>
      <td>24.7td>
      <td>227.9td>
      <td>-65td>
      <td>2td>
      <td>The red planettd>
    tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planetsth>
      <th rowspan="2" scope="rowgroup">Gas giantsth>
      <th scope="row">Jupiterth>
      <td>1898td>
      <td>142,984td>
      <td>1326td>
      <td>23.1td>
      <td>9.9td>
      <td>778.6td>
      <td>-110td>
      <td>67td>
      <td>The largest planettd>
    tr>
    <tr>
      <th scope="row">Saturnth>
      <td>568td>
      <td>120,536td>
      <td>687td>
      <td>9.0td>
      <td>10.7td>
      <td>1433.5td>
      <td>-140td>
      <td>62td>
      <td>td>
    tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giantsth>
      <th scope="row">Uranusth>
      <td>86.8td>
      <td>51,118td>
      <td>1271td>
      <td>8.7td>
      <td>17.2td>
      <td>2872.5td>
      <td>-195td>
      <td>27td>
      <td>td>
    tr>
    <tr>
      <th scope="row">Neptuneth>
      <td>102td>
      <td>49,528td>
      <td>1638td>
      <td>11.0td>
      <td>16.1td>
      <td>4495.1td>
      <td>-200td>
      <td>14td>
      <td>td>
    tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planetsth>
      <th scope="row">Plutoth>
      <td>0.0146td>
      <td>2,370td>
      <td>2095td>
      <td>0.7td>
      <td>153.3td>
      <td>5906.4td>
      <td>-225td>
      <td>5td>
      <td>
        Declassified as a planet in 2006, but this
        <a href="https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversiala>.
      td>
    tr>
  tbody>
table>

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

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

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

Bạn cũng có thể xem 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 áp dụng CSS quan trọng hơn

Đừng ảo tưởng; . Trong mô-đun này, chúng tôi đang tập trung vào phần HTML;

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 biểu định kiểu CSS tối thiểu để bạn sử dụng, điều này sẽ làm cho các bảng của bạn dễ đọc hơn so với biểu định kiểu mặc định mà bạn nhận được mà không cần bất kỳ kiểu dáng nào. Bạn có thể tìm thấy biểu định kiểu ở đây và bạn cũng có thể tìm thấy một mẫu HTML áp dụng biểu định kiểu đó — những điều này kết hợp với nhau sẽ mang đến cho bạn một điểm khởi đầu tốt để thử nghiệm với các bảng HTML

Các bảng HTML nên được sử dụng cho dữ liệu dạng 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 đã từng sử dụng các bảng HTML để bố trí các trang web, e. g. 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 thông tin chi tiết và ví dụ tại Mô-đun Học về Hỗ trợ Tiếp cận 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 rất tệ;

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

1. Bảng bố cục giảm khả năng truy cập cho người dùng khiếm thị. , được sử dụng bởi người mù, diễn giải các thẻ tồn tại trong trang HTML và đọc nội dung cho người dùng. Do các bảng không phải là công cụ phù hợp để bố trí và việc đá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 trình đọc màn hình sẽ gây nhầm lẫn cho người dùng của họ
2. Bàn sản xuất canh tag. Như đã đề cập ở trên, bố cục bảng thường bao gồm các cấu trúc đánh dấu phức tạp hơn so với các kỹ thuật bố cục phù hợp. Điều này có thể dẫn đến việc mã khó viết, bảo trì và gỡ lỗi hơn
3. Các bảng không tự động đáp ứng. Khi bạn sử dụng các vùng chứa bố cục phù 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% của phần tử gốc. Mặt khác, các bảng được định kích thước theo nội dung của chúng theo mặc định, do đó, cần có các biện pháp bổ sung để kiểu dáng bố cục bảng hoạt động hiệu quả trên nhiều loại thiết bị

Chúng ta đã 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, tạo một bản sao cục bộ của mẫu 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ẻ này.

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

   9. Thêm những thứ này vào bên trong nội dung HTML của bạn
3. Vùng chứa nhỏ nhất bên trong một bảng là một ô của bảng, được tạo bởi phần tử

   <td>Hi, I'm your first cell.td>
   

   0 ('td' là viết tắt của 'dữ liệu bảng'). Thêm phần sau vào trong thẻ bảng của bạn

   <td>Hi, I'm your first cell.td>
   

4. Nếu chúng ta muốn một hàng có 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

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

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

<td>Hi, I'm your first cell.td>

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

<td>Hi, I'm your first cell.td>

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

   <td>Hi, I'm your first cell.td>
   

   2, như vậy

   <tr>
     <td>Hi, I'm your first cell.td>
     <td>I'm your second cell.td>
     <td>I'm your third cell.td>
     <td>I'm your fourth cell.td>
   tr>
   

2. Bây giờ bạn đã tạo xong một hàng, hãy bắt đầu tạo thêm một hoặc hai hàng nữa — mỗi hàng cần được bao bọc trong một phần tử

   <td>Hi, I'm your first cell.td>
   

   2 bổ sung, với mỗi ô được chứa trong một

   <td>Hi, I'm your first cell.td>
   

   0

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

<table>
  <tr>
    <td>Hi, I'm your first cell.td>
    <td>I'm your second cell.td>
    <td>I'm your third cell.td>
    <td>I'm your fourth cell.td>
  tr>

  <tr>
    <td>Second row, first cell.td>
    <td>Cell 2.td>
    <td>Cell 3.td>
    <td>Cell 4.td>
  tr>
table>

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

Ghi chú. Bạn cũng có thể tìm thấy cái này trên GitHub dưới dạng bảng đơn giản. html (cũng xem trực tiếp)

Bây giờ, hãy chuyển sự chú ý của chúng ta sang tiêu đề bảng — các ô đặc biệt nằm ở đầu hàng hoặc cột và xác định loại dữ liệu mà hàng hoặc cột đó chứa (ví dụ: xem các ô "Người" và "Tuổi" trong ô đầu tiên . Để minh họa tại sao chúng hữu ích, hãy xem ví dụ về bảng sau. Đầu tiên mã nguồn

<table>
  <tr>
    <td> td>
    <td>Knockytd>
    <td>Flortd>
    <td>Ellatd>
    <td>Juantd>
  tr>
  <tr>
    <td>Breedtd>
    <td>Jack Russelltd>
    <td>Poodletd>
    <td>Streetdogtd>
    <td>Cocker Spanieltd>
  tr>
  <tr>
    <td>Agetd>
    <td>16td>
    <td>9td>
    <td>10td>
    <td>5td>
  tr>
  <tr>
    <td>Ownertd>
    <td>Mother-in-lawtd>
    <td>Metd>
    <td>Metd>
    <td>Sister-in-lawtd>
  tr>
  <tr>
    <td>Eating Habitstd>
    <td>Eats everyone's leftoverstd>
    <td>Nibbles at foodtd>
    <td>Hearty eatertd>
    <td>Will eat till he explodestd>
  tr>
table>

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

Bây giờ bảng kết xuất thực tế

Vấn đề ở đây là, trong khi bạn có thể hiểu được chuyện gì đang xảy ra, thì không dễ dàng để chéo dữ liệu tham khảo như nó có thể. Nếu tiêu đề cột và hàng nổi bật theo một cách nào đó thì sẽ tốt hơn nhiều

Hãy thử cải thiện bảng này

1. Đầu tiên, tạo một bản sao cục bộ của bảng chó của chúng tôi. 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. HTML chứa ví dụ về Chó giống như bạn đã thấy ở trên
2. Để nhận ra các tiêu đề bảng là tiêu đề, cả về mặt trực quan và ngữ nghĩa, bạn có thể sử dụng phần tử

   <td>Hi, I'm your first cell.td>
   

   6 ('th' là viết tắt của 'tiêu đề bảng'). Điều này hoạt động theo cách chính xác giống như một

   <td>Hi, I'm your first cell.td>
   

   0, ngoại trừ việc nó biểu thị một tiêu đề, không phải một ô bình thường. Đi vào HTML của bạn và thay đổi tất cả các phần tử

   <td>Hi, I'm your first cell.td>
   

   0 xung quanh tiêu đề bảng thành phần tử

   <td>Hi, I'm your first cell.td>
   

   6
3. Lưu HTML của bạn và tải nó trong trình duyệt, và bạn sẽ thấy rằng các tiêu đề bây giờ trông giống như các tiêu đề

Ghi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành của chúng tôi tại dogs-table-fixed. html trên GitHub (cũng có thể xem trực tiếp)

Chúng tôi đã trả lời một phần câu hỏi này — sẽ dễ dàng tìm thấy dữ liệu bạn đang tìm kiếm hơn khi các tiêu đề nổi bật rõ ràng và thiết kế nhìn chung trông đẹp hơn

Ghi chú. Tiêu đề bảng đi kèm với một số kiểu dáng mặc định — chúng được in đậm và căn giữa ngay cả khi bạn không thêm kiểu dáng của riêng mình vào bảng, để giúp chúng nổi bật

Tiêu đề bảng cũng có một lợi ích bổ sung — cùng với thuộc tính

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

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

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

<table>
  <tr>
    <th>Animalsth>
  tr>
  <tr>
    <th>Hippopotamusth>
  tr>
  <tr>
    <th>Horseth>
    <td>Maretd>
  tr>
  <tr>
    <td>Stalliontd>
  tr>
  <tr>
    <th>Crocodileth>
  tr>
  <tr>
    <th>Chickenth>
    <td>Hentd>
  tr>
  <tr>
    <td>Roostertd>
  tr>
table>

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

Nhưng đầu ra không mang lại cho chúng tôi những gì chúng tôi muốn

Chúng tôi cần một cách để "Động vật", "Hà mã" và "Cá sấu" trải dài qua hai cột và "Ngựa" và "Gà" trải dài xuống trên hai hàng. May mắn thay, tiêu đề bảng và ô có các thuộc tính

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

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

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

Hãy sử dụng

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

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

1. Đầu tiên, tạo một bản sao cục bộ của bảng động vật của chúng tôi. 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. HTML chứa ví dụ về động vật giống như bạn đã thấy ở trên
2. Tiếp theo, sử dụng

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

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

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

   2 để tạo khoảng cách "Ngựa" và "Gà" 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

Ghi chú. Bạn có thể tìm thấy ví dụ đã hoàn thành của chúng tôi tại động vật-bảng-cố định. html trên GitHub (cũng có thể xem trực tiếp)

Có một tính năng cuối cùng mà chúng tôi sẽ cho bạn biết trong bài viết này trước khi chúng ta 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 ở một nơi - các phần tử

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

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

<td>Hi, I'm your first cell.td>

<td>Hi, I'm your first cell.td>

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

Ghi chú. Cột tạo kiểu như thế này là.

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

<td>Hi, I'm your first cell.td>

<td>Hi, I'm your first cell.td>

<tr>
  <td>Hi, I'm your first cell.td>
  <td>I'm your second cell.td>
  <td>I'm your third cell.td>
  <td>I'm your fourth cell.td>
tr>

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;
}

Cho chúng ta kết quả sau

Điều này không lý tưởng, vì chúng tôi phải lặp lại thông tin kiểu dáng trên cả ba ô trong cột (có lẽ chúng tôi sẽ có một bộ _____16_______0 trên cả ba ô trong một dự án thực tế và chỉ định kiểu dáng trong một biểu định kiểu riêng)

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

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

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

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

<table>
  <tr>
    <td>Hi, I'm your first cell.td>
    <td>I'm your second cell.td>
    <td>I'm your third cell.td>
    <td>I'm your fourth cell.td>
  tr>

  <tr>
    <td>Second row, first cell.td>
    <td>Cell 2.td>
    <td>Cell 3.td>
    <td>Cell 4.td>
  tr>
table>

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 cột chỉ định thông tin kiểu 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 phần tử

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

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ử

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

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

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

Cũng giống như

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

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

<table>
  <tr>
    <td>Hi, I'm your first cell.td>
    <td>I'm your second cell.td>
    <td>I'm your third cell.td>
    <td>I'm your fourth cell.td>
  tr>

  <tr>
    <td>Second row, first cell.td>
    <td>Cell 2.td>
    <td>Cell 3.td>
    <td>Cell 4.td>
  tr>
table>

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

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

Tạo lại bảng bằng cách thực hiện theo các bước bên dưới

1. Đầu tiên, tạo một bản sao cục bộ thời gian biểu 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 mà bạn đã thấy ở trên, trừ đi thông tin kiểu dáng cột
2. Thêm phần tử

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

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

   <table>
     <tr>
       <td>Hi, I'm your first cell.td>
       <td>I'm your second cell.td>
       <td>I'm your third cell.td>
       <td>I'm your fourth cell.td>
     tr>
   
     <tr>
       <td>Second row, first cell.td>
       <td>Cell 2.td>
       <td>Cell 3.td>
       <td>Cell 4.td>
     tr>
   table>
   

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

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

   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 được để nguyên
4. Thêm màu nền vào cột thứ ba. Giá trị cho thuộc tính

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

   3 của bạn là

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

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

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

   3 của bạn là

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

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

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

   3 của bạn là

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

   8
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

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

   3 của bạn là

   <table>
     <tr>
       <td> td>
       <td>Knockytd>
       <td>Flortd>
       <td>Ellatd>
       <td>Juantd>
     tr>
     <tr>
       <td>Breedtd>
       <td>Jack Russelltd>
       <td>Poodletd>
       <td>Streetdogtd>
       <td>Cocker Spanieltd>
     tr>
     <tr>
       <td>Agetd>
       <td>16td>
       <td>9td>
       <td>10td>
       <td>5td>
     tr>
     <tr>
       <td>Ownertd>
       <td>Mother-in-lawtd>
       <td>Metd>
       <td>Metd>
       <td>Sister-in-lawtd>
     tr>
     <tr>
       <td>Eating Habitstd>
       <td>Eats everyone's leftoverstd>
       <td>Nibbles at foodtd>
       <td>Hearty eatertd>
       <td>Will eat till he explodestd>
     tr>
   table>
   

   0
8. Hai ngày cuối cùng là những ngày rảnh rỗi, vì vậy chỉ cần đặt chúng không có màu nền mà chỉ đặt chiều rộng;

Xem cách bạn tiếp tục với ví dụ. Nếu bạn gặp khó khăn 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 (cũng xem trực tiếp)

Đó chỉ là về những điều cơ bản của các bảng HTML. Trong bài viết tiếp theo, chúng ta 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ĩ xem chúng có thể truy cập được như thế nào đối với người khiếm thị

Chúng tôi có thể in trực tiếp từ bảng không?

Làm cách nào để in bảng cụ thể trong trang web JavaScript?

Làm cách nào để tạo bảng trong HTML với đầu ra?

Làm cách nào để in bảng trong HTML bằng jquery?