First, let's look at how CSS can be used to add a border to a table:
Remember when we were learning HTML tables, we also learned to use the border property to add borders to a table, and now we're going to look at how border is used in CSS styles:
Let's look at the properties of the Add border: Border-style property. Now let's look at a complete example:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>topic.alibabacloud.com</title> <style> table,td{border-style:dotted} </style> </head> <body> <table> <tr><td>11</td><td>22</td></tr> <tr><td>22</td><td>44</td></tr> </table> <table> <tr><td>11</td><td>22</td></tr> <tr><td>22</td><td>44</td></tr> </table> </body> </html>Do you know the effect of the above code? Let's see the effect:
It should be understood by all of you. Here's to explain the use of the code:
Border style: defines table border (table border, if table {} is used, there will be no more lines, only border lines, the lines in the middle will not appear, so here I add TD label, so that it will also show lines in it)
Dotted: the dotted attribute defines a dotted border, so there are so many points. (of course, there are other properties that also display the border. Let's look at them together.)
Solid: solid attribute defines solid line border
Double: the double property defines a double line border
Dashed: dashed property defines dashed border
After reading these, you should be able to understand. In the figure, I only introduce a kind of dot shaped frame, as well as double line frame and dotted line frame. You can try one by one, and it is obvious.
Now let's continue to talk about the border styles. Of course, there are several styles. Otherwise, how can we call it a summary
The border spacing property sets the distance between borders of adjacent cells
The caption side attribute sets the position of the table title
Today, I will introduce two kinds of attributes, plus the border style attribute above, just three. (recommend topic.alibabacloud.comcss learning manual column to learn more about CSS styles)
First look at the border spacing attribute:
The border spacing property sets the distance between borders of adjacent cells (length horizontal interval / length vertical interval)
<style>
table,td{border-spacing:length}
</style>
</head>
<body>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
<table>
<tr><td>11</td><td>22</td></tr>
<tr><td>22</td><td>44</td></tr>
</table>
</body>
It's the same as, but the setting is vertical spacing, so what we see may not be the same, so it's not shown here. You can practice it yourself. Finally, there's a caption side attribute. This is the position of setting the table title, which can be set on the top or below. That's all right.
So it's very convenient to have these attributes. OK, we'll introduce later.
Today's article about adding border style to CSS table is over here (if you want to learn more about CSS style, please go to topic.alibabacloud.comcss learning manual). Students with questions can leave a message and ask questions below
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
