html settings table

The table in HTML is a markup language used to present data. In web page layout design, the table is an important element and can be made to present a more beautiful effect through some settings. This article will introduce some techniques for setting tables in HTML to help readers better master the use of tables.

1. Set the table border

By setting the table border, you can make the table look clearer and easier for readers to distinguish. A common setting method is to use the border attribute. The border property can set the width and color of the table border. The sample code is as follows:

<table border="1">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

where border="1" means the border width is 1 pixel. Of course, you can also set a larger value to increase the width of the border. If you want to control the color and style of the border, you can also use CSS properties to set it.

2. Set the table width

When there is too much content in the table, the table will automatically become wider, but if the width of the container where the table is located is limited, the content of the table will be Overflow container. To avoid this situation, you can control the table size by setting the table width. There are many ways to set the table width. This article introduces two common ways.

(1) Use the width attribute. The width attribute can set the width of the table, which can be a percentage or pixel value. The sample code is as follows:

<table width="50%">
  <tr>
    <td>第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

(2) Use CSS style. You can have better control over the size and style of the table through CSS styles. The sample code is as follows:

<style>
  table {
    width: 50%;
    border-collapse: collapse;
  }
  th,td {
    border: 1px solid black;
    padding: 5px;
  }
</style>

<table>
  <tr>
    <th>第一列</th>
    <th>第二列</th>
  </tr>
  <tr>
    <td>第三列</td>
    <td>第四列</td>
  </tr>
</table>

In the above sample code, we use CSS styles to set the table's width, border spacing, and cell padding.

3. Set the header and table body

In the table, some data are more important and may need to be identified using the header. If the header is not set, it may be difficult for readers to quickly find the information they need from the table. So when setting up the table, we need to mark the header and table body. The sample code is as follows:

<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>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

In the above sample code, we use thead and tbody tags to divide the table into two parts: the table header and the table body.

4. Merge rows and columns

In the table, if the contents of some cells are the same, you can reduce the size and size of the table by merging rows and columns. Duplicate content. The sample code is as follows:

<table border="1">
  <tr>
    <td rowspan="2">第一列</td>
    <td>第二列</td>
    <td colspan="2">第三列</td>
  </tr>
  <tr>
    <td>第四列</td>
    <td>第五列</td>
  </tr>
</table>

In the above sample code, we use the rowspan attribute to merge the first column cells into two rows, and the colspan attribute to merge the third column cells into two columns.

5. Set the cell background color and font color

If you need to highlight certain information in the table, you can achieve the purpose by setting the cell background color and font color. Commonly used settings are to use CSS styles and bgcolor properties. The sample code is as follows:

<style>
  td.red { background-color: red; color: white; }
  td.green { background-color: green; color: white; }
</style>

<table>
  <tr>
    <td class="red">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td class="green">第三列</td>
    <td>第四列</td>
  </tr>
</table>

或者

<table>
  <tr>
    <td bgcolor="red" color="white">第一列</td>
    <td>第二列</td>
  </tr>
  <tr>
    <td bgcolor="green" color="white">第三列</td>
    <td>第四列</td>
  </tr>
</table>

In the above sample code, we use CSS styles and bgcolor/color properties to set the background color and font color of the cell.

Summary

The table in HTML is a commonly used markup language, which can help readers better understand the data in the table through reasonable settings. This article introduces some techniques for setting tables in HTML, including setting table borders, table width, table headers and table bodies, merging rows and columns, and setting cell background and font colors. By mastering these skills, we can better use the table tag and create a more beautiful web page layout.

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