How to style table with css

In web design, tables are one of the commonly used elements. Through the use of tables, we can better display information and data. However, when using tables, if you do not set styles, the page will appear monotonous and boring, which is not conducive to conveying information. So, this article will show you how to style a table using CSS.

1. Set the basic style of the table

We can use the table tag to define the table, and then use CSS to set its style. The following is a code example of the most basic table:

<table>
    <tr>
        <th>数字</th>
        <th>字母</th>
    </tr>
    <tr>
        <td>1</td>
        <td>A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>B</td>
    </tr>
</table>

This code defines a table containing two columns and three rows. The upper row is the header and the lower two rows are the table content. Next, we can set basic styles for the table, such as setting table borders, cell padding, and the distance between cells (cellspacing).

table {
    border-collapse: collapse;  /* 合并边框 */
    border-spacing: 0;  /* 设置单元格之间的距离为 0 */
    width: 100%;
}

th, td {
    padding: 8px;  /* 设置单元格内边距 */
    border: 1px solid #ccc;  /* 设置边框 */
}

In the above code, we used border-collapse: collapse to merge the table borders to make it look neater. border-spacing: 0 Set the distance between cells to 0 to make the table look more compact. Setting width: 100% can make the table adapt to the size of the browser window. Next, we use the th,td selector to style the cell. Setting padding: 8px can adjust the padding size of the cell to make the table content more beautiful. Set border: 1px solid #ccc You can set a border for the cell, here the gray color (#ccc) is used.

2. Set the header style

The header is an important part of the table and is usually marked as a <th> element. We can style the headers individually.

th {
    background-color: #f2f2f2;  /* 设置表头背景颜色 */
    font-weight: bold;  /* 设置表头文本加粗 */
    text-align: left;  /* 设置表头文本左对齐 */
}

In the above code, we use background-color: #f2f2f2 to set the background color of the table header. Setting font-weight: bold can make the header text bold and make it stand out more. Use text-align: left to left align the header text.

3. Set alternating row styles of the table

In order to make the table easier to read, we can set alternating styles for the odd and even rows of the table.

tr:nth-child(even) {
    background-color: #f2f2f2;  /* 设置偶数行背景颜色 */
}

In the above code, we use the nth-child(even) pseudo-class selector to select the even rows of the table, and then set its background color to gray (#f2f2f2) .

4. Set table mouseover state style

When the mouse hovers over a table row, we can set different styles for it to increase interactivity.

tr:hover {
    background-color: #ddd;  /* 设置鼠标悬停状态的背景颜色 */
}

In the above code, we used the hover pseudo-class selector to select the mouse-hovered row and then set its background color to gray (#ddd).

Through the above steps, we can set styles for the table to make it more beautiful and clear. Of course, we can also make more style settings according to needs, such as adjusting font size, color, etc. In general, table styling can make the page more colorful and easier to read and understand.

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