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

Editor to share with you how to use CSS table properties, 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 understand it!

Table border

To configure a table border in CSS, use the border property.

The above example has a blue border for table, th, and td:

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

Try it yourself.

Please make sure that the table in the above example has a double-line border. This is because the table, th, and td elements all have separate borders.

Assuming that it is important to represent the table as a single-line border, use the border-collapse attribute.

Fold border

The border-collapse property sets whether the table border is folded into multiple borders:

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

Give it a try

Table width and height

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

The following example sets the table width setting rig to 100% and sets the height of the th element to 50px:

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

Try it for yourself

Table text alignment

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

The text-align property sets the horizontal alignment of the door path, such as left alignment and right alignment generally centered:

Td {text-align:right;}

Try it for yourself

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

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

Give it a try

Inner margin of the table

To control the separation of the content from the border in the table, configure the padding attribute for the td and th elements:

Td {padding:15px;}

Try it for yourself

Table color

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

Table, td, th {border:1px solid green;} th {background-color:green; color:white;} are all the contents of this article entitled "how to use CSS Table Properties". 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.