css setting table

CSS is a language used to control the style of web pages. It can change various elements such as colors, fonts, layout, etc. in web pages. Tables are one of the most common elements in web design, and CSS provides a flexible way to help us set precise styles for tables.

The following is an example:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>28</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>31</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Set styles for the table through CSS:

/* 表格样式 */
table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 宽度自适应 */
  margin: 20px 0; /* 留出一定的边距 */
  font-size: 16px; /* 字体大小 */
}

/* 表头样式 */
thead {
  background-color: #f2f2f2; /* 背景颜色 */
  font-weight: bold; /* 字体加粗 */
}

/* 表格单元格样式 */
td, th {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 内边距 */
  text-align: left; /* 文字对齐方式 */
  width: 33.33%; /* 列宽自动平均分配 */
}

/* 鼠标悬浮样式 */
tr:hover {
  background-color: #f5f5f5; /* 背景颜色 */
}

Through the above CSS code, we set some basic styles for the table:

• Merge table borders to make the table look neater and more beautiful;
• Bold the table header and set the background color to make it clearly different from the data;
• Set table cells Grid borders, padding and row height make the table more readable and understandable;
• Use the background color when the mouse is hovered to make the table more interactive.

In addition to the above basic styles, CSS also provides more styles that can be used for table design and layout, which can be selected and applied according to your own needs.

In short, CSS is one of the important tools for web design. Proficiency in the basic syntax and common properties of CSS is crucial to designing beautiful, easy-to-read and understandable tables.

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