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 <table> tag to create a table. The table header can be defined using the <thead> tag, and the table body can be defined using the <tbody> 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 <tr> label represents a row in the table, the <th> label represents a column in the header, and the <td> label represents a column in the table body. of a column. It should be noted that the three tags <thead>, <tbody> and <tfoot> 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 <table> 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 <table>, <thead>, <tbody> 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!