Article directory

CSS table
table border
Collapse border
Table height and width
Table text alignment
form filling
Table color
Set the position of the table title

CSS table

CSS table properties can be used to change the style of a table.

For example, the following code will turn the table border into red, with a vertical line between each cell:

table {
    
    
  border-collapse: collapse;
  border: 2px solid red;
}

td {
    
    
  border: 1px solid black;
  border-width: 0 1px;
  padding: 10px;
}

In the above code:

border-collapse: collapse;Will merge the table's borders into a single border instead of the default double border.
border: 2px solid red;Set the border of the entire table to 2 pixels wide and the line color to red.
border: 1px solid black;Set the cell's border to 1 pixel wide and the line color to black.
border-width: 0 1px;will set the vertical line width between cells to 0, and the vertical line width of the cells themselves to 1 pixel. This can achieve the visual effect of having only a line of whitespace between cells.
padding: 10px;Add padding to cells, which puts some distance between text and borders to improve readability.

table border

In CSS, you can use borderproperties to style table borders. For example:

table {
    
    
  border: 1px solid black;
}

Here, borderthe attribute value is set 1px solid blackto indicate that the table border width is 1 pixel, the line style is solid line, and the line color is black.

In addition, you can also set the style of each border separately, such as:

table {
    
    
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px dotted blue;
  border-left: 4px double yellow;
}

Here, different styles are set for the top, right, bottom, and left borders of the table. If you need to display borders, you need to set borderproperties. At the same time, within the table, the borders between cells are not displayed by default. If they need to be displayed, you need to set attributes for the cells border.

Collapse border

CSS folding border is a CSS technique used to reduce or expand the border. It mainly sets the width and height of the border so that the border can be collapsed according to actual needs when it needs to be reduced or expanded. This effect is very useful when dealing with typography, UI design, or other scenarios where the border size needs to be dynamically changed.

To achieve collapsing borders, you can use CSS box-shadowproperties. By setting the shadow to a negative value, you can create an effect that looks like the border is being collapsed. For example:

.fold-border {
    
    
    width: 100px;
    height: 100px;
    box-shadow: -10px 0px 10px 0px #000;
}

Here, box-shadowthe four parameters represent horizontal offset, vertical offset, blur distance and shadow color respectively. By adjusting the horizontal and vertical offsets, you can change the position of the shadow to simulate a folded border.

Please note that this is just a way to simulate a folding border. The actual folding border effect may need to be achieved using other techniques or with other attributes. For example, you may need to consider factors such as the rounded corners of the border, the background color, and the stroke effect to ensure that the folding effect looks more natural.

Table height and width

In CSS, you can use heightthe and widthattributes to set the size of the table.

widthProperty is used to set the width of the table, it can accept different units such as percentage or pixels. For example:

table {
    
    
  width: 100%;  /* 表格宽度占父元素的100% */
}

table {
    
    
  width: 600px;  /* 表格宽度为600像素 */
}

The height` attribute is used to set the height of the table, usually in pixels. For example:

table {
    
    
  height: 200px;  /* 表格高度为200像素 */
}

If you need to set the width and height of the table at the same time, you can use these two properties together. For example:

table {
    
    
  width: 100%;
  height: 200px;
}

Additionally, you can limit the maximum and minimum width of the table using max-widththe and min-widthattributes, and the maximum and minimum height of the table using the max-heightand min-heightattributes. For example:

table {
    
    
  max-width: 800px;  /* 表格宽度最大为800像素 */
  min-height: 300px;  /* 表格高度最小为300像素 */
}

These attributes can be used individually or in combination to achieve a beautiful and neat effect on the table in different scenarios.

Table text alignment

In CSS, table text can be set using different alignment methods.

For text in a cell, you can use text-alignproperties to set the horizontal alignment. Optional values include left(left-aligned), right(right-aligned), center(center-aligned), and justify(justified). For example:
```
td {
      
      
  text-align: center;  /* 文字居中对齐 */
}
```
For vertical alignment, you can use vertical-alignthe attribute, with possible values including baseline(Baseline Alignment), middle(Vertical Center), and bottom(Bottom Alignment). For example:
```
td {
      
      
  vertical-align: middle;  /* 文字垂直居中 */
}
```
For table titles or headers, you can use alignproperties to set the horizontal alignment. Optional values include left(left-aligned), center(center-aligned), and right(right-aligned). For example:
```
th {
      
      
  align: center;  /* 表头文字居中对齐 */
}
```

It should be noted that the row height or cell width of the table can be adjusted by setting the cell's heightor widthproperties. If the content in the cell exceeds the width or height of the cell, you can use CSS overflow processing to handle it, such as using overflow: auto;automatic scroll bar display.

form filling

In CSS, you can use different filling methods to fill cells.

For text in a cell, you can use paddingproperties to set the padding of the cell to adjust the distance between the text and the edge of the cell. For example:
```
td {
      
      
  padding: 10px;  /* 单元格内边距为10像素 */
}
```

The background color of the cell can be background-colorset using properties. For example:

td {
      
      
  background-color: #f0f0f0;  /* 单元格背景色为灰色 */
}

For cell border lines, you can use borderproperties to set the style, width, and color of the line. For example:

td {
      
      
  border: 1px solid #000;  /* 单元格边框为1像素的黑色实线 */
}

For table rows or columns, you can use rowspanthe or colspanattribute to merge cells. For example:
```
td {
      
      
  rowspan: 2;  /* 单元格跨行 */
}
```

For the title of the table, you can use captionattributes to set the style of the title. For example:

caption {
      
      
  font-size: 20px;  /* 标题字体大小为20像素 */
  caption-side: top;  /* 标题在表格上方 */
}

Table color

In CSS, you can use different color properties to set the color of the table.

For the border lines of the table, you can use border-colorproperties to set the color of the lines. For example:
```
table {
      
      
  border-color: #000;  /* 边框线条颜色为黑色 */
}
```

The background color of the cell can be background-colorset using properties. For example:

td {
      
      
  background-color: #f0f0f0;  /* 单元格背景色为灰色 */
}

For table rows or columns, you can use rowspanthe or colspanproperty to merge cells and set the background color of the merged cells. For example:
```
td {
      
      
  rowspan: 2;
  background-color: #fff;  /* 合并单元格的背景色为白色 */
}
```
For the title of the table, you can use caption-colorproperties to set the color of the title. For example:
```
caption {
      
      
  caption-color: #f00;  /* 标题颜色为红色 */
}
```

It should be noted that the value of the color attribute can be a predefined color name, hexadecimal color code, RGB value or HSL value, etc. For example, red can be represented by red, #f00, rgb(255,0,0)or hsl(0,100%,50%).

Set the position of the table title

In CSS, you can use caption-sideproperties to set the position of the table title.

To place the table title above the table, set caption-sidethe property to top. For example:
```
caption {
      
      
  caption-side: top;
}
```
To place the table title below the table, set caption-sidethe property to bottom. For example:
```
caption {
      
      
  caption-side: bottom;
}
```
To omit the table title, set caption-sidethe property to none. For example:
```
caption {
      
      
  caption-side: none;
}
```

Note: Before CSS 2.1, two values were provided: "left" and "right" to position the title to the left and right of the table respectively. However, these two values were removed in the final 2.1 specification and are no longer supported by browsers.

CSS table: Table