CSS Tables (Tables)

Tables are usually used to display tabular data.

using CSS style sheets

When you build an HTML table without any style or attributesHTML tablebrowser will display them without any borders. Styling tables with CSS can greatly improve their appearance.

The following sections will show you how to use CSS to control the layout and representation of table elements to create elegant and consistent tables. Using CSS to style tables can greatly improve their appearance.

Add borders to the table

CSS borderproperty is the best way to define table borders.

The following example will set a black border with the<table>，<th>and<td>element.

table,　th,　td　{
　　　　border:　1px　solid　black;
}

Collapse table borders

If you have seen the output of the previous example, you will notice that each table cell has a separate border, and there is some spacing between the borders of adjacent table cells. This happens because the default table cell borders are separated. However, you can use the elementborder-collapseThe property on the following attribute will fold the separate table borders into one border<table>：

In the following example, the style rules will collapse the table cell borders and apply a one-pixel black border to the table and table cell elements.

table {
　　　　border-collapse:　collapse;
}
table,　th,　td　{
　　　　border:　1px　solid　black;
}

You can also set the space between table cell borders to be removed using CSS valuesborder-spacingThe property is set to 0. However, it only removes the space without merging as when you set the border-collapse to collapse.

Adjust the internal space of the table

By default, the table cells created by the browser are exactly large enough to contain the data in the cells. To add more space around the content of the table cell, you can use the CSS padding property as shown below:

th,　td　{
　　　　padding:　15px;
}

border-spacingIf the table borders are separated (the default setting), you can also use CSS properties to adjust the spacing between cell borders.

The following style rules are applied between all borders in the table10Pixel spacing:

table {
　　　　border-spacing:　10px;
}

Control table layout

By default, the table expands and contracts to accommodate the data it contains. When data is filled into the table, it continues to expand as long as there is space. However, it is sometimes necessary to set a fixed width for the table to manage the layout.

您可以借助CSS table-You can use the CSS table

• layout property to perform this operation. This property defines the algorithm used to arrange the table cells, rows, and columns. This property takes one of two values: auto

• —Using the automatic table layout algorithm. With this algorithm, the width of the table and its cells can be adjusted to fit the content. This is the default value. -fixed

Using the fixed table layout algorithm. With this algorithm, the horizontal layout of the table does not depend on the content of the cells; it only depends on the width of the table, the width of the columns, and the borders or cell spacing.3In the following example, the style rules indicate that the table is laid out using the fixed table layout algorithm and has

table {
　　　　00 pixels fixed width.　3width:
　　　　00px;-table
}

layout: fixed;-Without the table

layout property to optimize the table rendering performance. This property's fixed value makes the table render one row at a time, thus providing users with faster information.

handles empty cells-The empty

This property can take one of three values: show, hide, or inherit.

The following style rules hide empty cells in the table element.

table {
　　　　border-collapse: separate;
　　　　empty-cells: hide;
}

controls the position of the table caption

The caption-sideCSS property to set the vertical position of the table caption box.

The following style rules place the table caption below its parent table. However, to change the horizontal alignment of the caption text, you can use thetext-alignProperties.

caption {
　　　　caption-side: bottom;
}