Hướng dẫn how do you save a table in html? - làm thế nào để bạn lưu một bảng trong html?

Làm thế nào để bạn tạo một bảng trong HTML?

Một bảng HTML được tạo với thẻ mở và thẻ đóng. Bên trong các thẻ này, dữ liệu được sắp xếp thành các hàng và cột bằng cách sử dụng các thẻ hàng mở và đóng bảng và mở và đóng các thẻ dữ liệu bảng. Thẻ hàng bảng được sử dụng để tạo một hàng dữ liệu.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.

Mã HTML cho bảng là gì?

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.

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </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 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ư

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   2,

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   3,

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   4 hoặc

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   5), 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

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   2,

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   3,

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   4, or

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   5), 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:

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

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

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   6. 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ử

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   1 ('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:

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   1 element ('td' stands for 'table data'). Add the following inside your table tags:

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

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:

   <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 tự động được liên kết với nhau trên cùng một hàng. Mỗi phần tử

function tableToJson(table) {
  var data=[];
  var headers=[];
  for (var i=0;
  i < table.rows[0].cells.length;
  i++) {
    headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }
  for (var i=1;
  i < table.rows.length;
  i++) {
    var tableRow=table.rows[i];
    var rowData= {}
    ;
    for (var j=0;
    j < tableRow.cells.length;
    j++) {
      rowData[headers[j]]=tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

Để 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ử

function tableToJson(table) {
  var data=[];
  var headers=[];
  for (var i=0;
  i < table.rows[0].cells.length;
  i++) {
    headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }
  for (var i=1;
  i < table.rows.length;
  i++) {
    var tableRow=table.rows[i];
    var rowData= {}
    ;
    for (var j=0;
    j < tableRow.cells.length;
    j++) {
      rowData[headers[j]]=tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

function tableToJson(table) {
  var data=[];
  var headers=[];
  for (var i=0;
  i < table.rows[0].cells.length;
  i++) {
    headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }
  for (var i=1;
  i < table.rows.length;
  i++) {
    var tableRow=table.rows[i];
    var rowData= {}
    ;
    for (var j=0;
    j < tableRow.cells.length;
    j++) {
      rowData[headers[j]]=tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

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

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   0, 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 đã 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ử

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   0 bổ sung, với mỗi ô chứa trong một

   function tableToJson(table) {
     var data=[];
     var headers=[];
     for (var i=0;
     i < table.rows[0].cells.length;
     i++) {
       headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
     }
     for (var i=1;
     i < table.rows.length;
     i++) {
       var tableRow=table.rows[i];
       var rowData= {}
       ;
       for (var j=0;
       j < tableRow.cells.length;
       j++) {
         rowData[headers[j]]=tableRow.cells[j].innerHTML;
       }
       data.push(rowData);
     }
     return data;
   }
   

   1.

Kết quả

Đ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>

<input type="button" id="txt" value="Save" />

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:

<input type="button" id="txt" value="Save" />

<input type="button" id="txt" value="Save" />

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

(James,Miles,,9876543210,email),
(John,Paul,,9638527410,phone),
(Math,willams,,99873210456,phone)

(James,Miles,,9876543210,email),
(John,Paul,,9638527410,phone),
(Math,willams,,99873210456,phone)

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>

Hãy sử dụng

(James,Miles,,9876543210,email),
(John,Paul,,9638527410,phone),
(Math,willams,,99873210456,phone)

(James,Miles,,9876543210,email),
(John,Paul,,9638527410,phone),
(Math,willams,,99873210456,phone)

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

   (James,Miles,,9876543210,email),
   (John,Paul,,9638527410,phone),
   (Math,willams,,99873210456,phone)
   

   8 để 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

   (James,Miles,,9876543210,email),
   (John,Paul,,9638527410,phone),
   (Math,willams,,99873210456,phone)
   

   9 để 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ử

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>

function tableToJson(table) {
  var data=[];
  var headers=[];
  for (var i=0;
  i < table.rows[0].cells.length;
  i++) {
    headers[i]=table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
  }
  for (var i=1;
  i < table.rows.length;
  i++) {
    var tableRow=table.rows[i];
    var rowData= {}
    ;
    for (var j=0;
    j < tableRow.cells.length;
    j++) {
      rowData[headers[j]]=tableRow.cells[j].innerHTML;
    }
    data.push(rowData);
  }
  return data;
}

(James,Miles,,9876543210,email),
(John,Paul,,9638527410,phone),
(Math,willams,,99873210456,phone)

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>

<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 - Metric</a>).
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <th scope="col">Name</th>
      <th scope="col">Mass (10<sup>24</sup>kg)</th>
      <th scope="col">Diameter (km)</th>
      <th scope="col">Density (kg/m<sup>3</sup>)</th>
      <th scope="col">Gravity (m/s<sup>2</sup>)</th>
      <th scope="col">Length of day (hours)</th>
      <th scope="col">Distance from Sun (10<sup>6</sup>km)</th>
      <th scope="col">Mean temperature (°C)</th>
      <th scope="col">Number of moons</th>
      <th scope="col">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="2" rowspan="4" scope="rowgroup">Terrestrial planets</th>
      <th scope="row">Mercury</th>
      <td>0.330</td>
      <td>4,879</td>
      <td>5427</td>
      <td>3.7</td>
      <td>4222.6</td>
      <td>57.9</td>
      <td>167</td>
      <td>0</td>
      <td>Closest to the Sun</td>
    </tr>
    <tr>
      <th scope="row">Venus</th>
      <td>4.87</td>
      <td>12,104</td>
      <td>5243</td>
      <td>8.9</td>
      <td>2802.0</td>
      <td>108.2</td>
      <td>464</td>
      <td>0</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Earth</th>
      <td>5.97</td>
      <td>12,756</td>
      <td>5514</td>
      <td>9.8</td>
      <td>24.0</td>
      <td>149.6</td>
      <td>15</td>
      <td>1</td>
      <td>Our world</td>
    </tr>
    <tr>
      <th scope="row">Mars</th>
      <td>0.642</td>
      <td>6,792</td>
      <td>3933</td>
      <td>3.7</td>
      <td>24.7</td>
      <td>227.9</td>
      <td>-65</td>
      <td>2</td>
      <td>The red planet</td>
    </tr>
    <tr>
      <th rowspan="4" scope="rowgroup">Jovian planets</th>
      <th rowspan="2" scope="rowgroup">Gas giants</th>
      <th scope="row">Jupiter</th>
      <td>1898</td>
      <td>142,984</td>
      <td>1326</td>
      <td>23.1</td>
      <td>9.9</td>
      <td>778.6</td>
      <td>-110</td>
      <td>67</td>
      <td>The largest planet</td>
    </tr>
    <tr>
      <th scope="row">Saturn</th>
      <td>568</td>
      <td>120,536</td>
      <td>687</td>
      <td>9.0</td>
      <td>10.7</td>
      <td>1433.5</td>
      <td>-140</td>
      <td>62</td>
      <td></td>
    </tr>
    <tr>
      <th rowspan="2" scope="rowgroup">Ice giants</th>
      <th scope="row">Uranus</th>
      <td>86.8</td>
      <td>51,118</td>
      <td>1271</td>
      <td>8.7</td>
      <td>17.2</td>
      <td>2872.5</td>
      <td>-195</td>
      <td>27</td>
      <td></td>
    </tr>
    <tr>
      <th scope="row">Neptune</th>
      <td>102</td>
      <td>49,528</td>
      <td>1638</td>
      <td>11.0</td>
      <td>16.1</td>
      <td>4495.1</td>
      <td>-200</td>
      <td>14</td>
      <td></td>
    </tr>
    <tr>
      <th colspan="2" scope="rowgroup">Dwarf planets</th>
      <th scope="row">Pluto</th>
      <td>0.0146</td>
      <td>2,370</td>
      <td>2095</td>
      <td>0.7</td>
      <td>153.3</td>
      <td>5906.4</td>
      <td>-225</td>
      <td>5</td>
      <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 controversial</a>.
      </td>
    </tr>
  </tbody>
</table>