Shulou(Shulou.com)06/01 Report--

Editor to share with you CSS how to set the appearance style of the table, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

CSS form

The CSS table properties can help you greatly improve the appearance of the table.

Table border

To set the table border in CSS, use the border property. For example, set blue borders for table, th, and td:

Table, th, td {border: 1px solid blue;}

Note: the table in this example has a double-line border. This is because the table, th, and td elements all have separate borders.

Tip: if you need to display the table as a single-line border, use the border-collapse property.

Fold border

The border-collapse property sets whether the table border is folded to a single border:

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

Table width and height

The width and height of the table are defined through the width and height properties.

Table {width: 100%;} th {height:50px;}

Note: this example sets the width of the table to 100% and the height of the th element to 50px.

Table text alignment

The text-align and vertical-align properties set the alignment of text in the table.

The text-align property sets horizontal alignment, such as left, right, or center:

Td {text-align: right;}

The vertical-align property sets vertical alignment, such as top, bottom, or center alignment:

Td {height: 50px; vertical-align: bottom;}

Inner margin of the table

To control the distance between the contents of the table and the border, set the padding attribute for the td and th elements:

Td {padding: 15px;}

Table color

The following example sets the color of the border and the text and background color of the th element:

Table, td, th {border: 1px solid green;} th {background-color: green; color: white;}

Table example

# customers {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; width: 100%; border-collapse: collapse;} # customers td, # customers th {font-size: 1em; border: 1px solid # 98bf21; padding: 3px 7px 2px 7px;} # customers th {font-size: 1.1em; text-align: left; padding-top: 5px; padding-bottom: 4px; background-color: # A7C942 Color: # ffffff;} # customers tr.alt td {color: # 0000000; background-color: # EAF2D3 } Company Contact Country Apple Steven Jobs USA Baidu Li YanHong China Google Larry Page USA Lenovo Liu Chuanzhi China Microsoft Bill Gates USA Nokia Stephen Elop Finland

CSS Table attribute and description

Border-collapse: sets whether to merge table borders into a single border.

Border-spacing: sets the distance at which cell borders are separated.

Caption-side: sets the location of the table title.

Empty-cells: sets whether to display empty cells in the table.

Table-layout: sets the algorithm for displaying units, rows, and columns.

The above is all the contents of the article "how to set the appearance style of the table in CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.