html table settings

HTML Table settings

HTML table is a commonly used web page element. It can present data to users in the form of a table, and can be beautified and interacted with through CSS styles and JavaScript. In this article, we will introduce how to set the rows, columns, borders, background and other attributes of tables in HTML to make your tables more beautiful and easier to read.

1. Create an HTML table

An HTML table consists of a table header and a table body. We can use the f5d188ed2c074f8b944552db028f98a1 tag to create a table. The table header can be defined using the ae20bdd317918ca68efdc799512a9b39 tag, and the table body can be defined using the 92cee25da80fac49f6fb6eec5fd2c22a tag, as shown below:

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
    </tr>
  </tbody>
</table>

where, The a34de1251f0d9fe1e645927f19a896e8 label represents a row in the table, the b4d429308760b6c2d20d6300079ed38e label represents a column in the header, and the b6c5a531a458a2e790c1fd6421739d1c label represents a column in the table body. of a column. It should be noted that the three tags ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a and 06669983c3badb677f993a8c29d18845 are optional, but they should be in accordance with the table structure to nest.

2. Set the number of rows and columns of the table

We can use rowspan and colspan in the f5d188ed2c074f8b944552db028f98a1 tag attributes to set the number of rows and columns in the table, as shown below:

<table>
  <tr>
    <td rowspan="2">数据1</td>
    <td>数据2</td>
  </tr>
  <tr>
    <td>数据3</td>
  </tr>
  <tr>
    <td colspan="2">数据4</td>
  </tr>
</table>

Among them, the rowspan attribute is used to set the number of rows spanned by the cell, and the colspan attribute is used to Sets the number of columns the cell spans. In the above example, the first cell in the first row spans two rows, and the cell in the third row spans two columns.

3. Set the border, margin and background of the table

We can use border, padding and background in CSS styles -color attribute to set the border, margin and background of the table, as shown below:

table {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid black; /* 边框样式 */
  width: 100%; /* 宽度100% */
  margin-bottom: 20px; /* 底部边距20px */
  background-color: white; /* 背景颜色为白色 */
}

th, td {
  padding: 8px; /* 单元格边距为8px */
  border: 1px solid black; /* 单元格边框样式 */
}

It should be noted that the border-collapse attribute can be used to merge table borders, Make the form more beautiful.

4. Set the alignment of the table

We can use the text-align and vertical-align attributes in the CSS style to set the Chinese text of the table The alignment of words is as follows:

table {
  text-align: center; /* 水平居中对齐 */
}

th, td {
  vertical-align: middle; /* 垂直居中对齐 */
}

In the above example, the text-align attribute is used to set the horizontal alignment of text, and the vertical-align attribute Used to set the vertical alignment of text. It should be noted that the vertical-align attribute only works on rows in the table, so apply it to the th and td tags.

Summary

HTML tables are frequently used elements in web page production. We need to master how to use f5d188ed2c074f8b944552db028f98a1, ae20bdd317918ca68efdc799512a9b39, 92cee25da80fac49f6fb6eec5fd2c22a and other tags to create a table, and how to use the rowspan, colspan attributes to set the number of rows and columns in the table. In addition, we also need to be familiar with border, padding, background-color, text-align and vertical in CSS styles -align attribute makes the table more beautiful and easier to read.

The above is the detailed content of html table settings. For more information, please follow other related articles on the PHP Chinese website!