How to create a data display page using HTML table layout

How to use HTML table layout to create a data display page

HTML table is a common layout tool that can be used to create data display pages. By rationally utilizing the structure and attributes of tables, you can create clear, easy-to-read, and beautiful data display pages.

1. Basic table structure

In HTML, tables are composed of table, tr and td tags. The table tag is used to define a table, the tr tag is used to define table rows, and the td tag is used to define table cells. The following is an example of a basic table structure:

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
    <th>标题3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

In the above example, the title bar is defined using the th tag, and the data rows are defined using the td tag. The th tag is usually used in the first row of a table to display titles or column names, while the td tag is used to display ordinary table data.

2. Set the table style

The style of the table can be set through CSS. Different styles can be set for table, tr and td tags to achieve the purpose of customizing the table style. Here is a simple example:

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }
  
  th {
    background-color: #f0f0f0;
    font-weight: bold;
  }
</style>

In the above example, we set the width of the table label to 100% so that it fills the width of the parent container; use the border-collapse: collapse attribute to make the table The borders are merged into one; both the th and td tags set the border style and padding; the th tag also sets the background color and font boldness.

3. Merge cells

In some cases, we may need to merge cells to display more complex data. HTML provides colspan and rowspan attributes to merge cells. The following is an example of using the colspan attribute to merge table cells:

<table>
  <tr>
    <th colspan="2">合并单元格</th>
    <th>普通单元格</th>
  </tr>
  <tr>
    <td rowspan="2">合并单元格</td>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
  <tr>
    <td>合并单元格</td>
    <td>普通单元格</td>
  </tr>
</table>

In the above example, we use colspan="2" to merge the title bar cells of the first row across two columns, and use rowspan= "2" causes the cells in the first column to be merged across both rows.

4. Group data using table headers and table bodies

For large data sets, we can place the table header and table body in the and

tags respectively. This makes the table more structured and better optimizes performance when rendering. Here is an example:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>18</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

In the above example, we use the tag to define the head of the table, and the

tag to define the body of the table.

By using the above techniques properly, we can use HTML table layout to create beautiful and easy-to-read data display pages. Of course, according to actual needs, we can further add CSS styles to beautify the table, such as setting background color, border style, etc.

I hope the above content will be helpful to you in creating a data display page!

The above is the detailed content of How to create a data display page using HTML table layout. For more information, please follow other related articles on the PHP Chinese website!