Home > Article > Web Front-end > How to add border style to css table? Summary of css table border styles (with complete examples)
How to add border style to css table? Summary of css table border styles (with complete examples)
- 寻∝梦Original
- 2018-09-07 13:38:179428browse
This article mainly talks about adding border styles to css tables. There is also a summary of css table border styles and a complete example of css table borders. Next, let us look at this article together
First let’s take a look at how to use css to add borders to tables:
Remember we are learning html tables I also learned to use the border attribute to add borders to tables. Now we do the same. Let's take a look at how borders are used in CSS styles:
Let's take a look at adding Border properties: border-style property. Now let’s take a look at a complete example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</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 take a look at the effect:
Everyone should be able to understand it after looking at the effect diagram. Here we still need to explain the use of the code:
border-style: Defines the border of the table (the border of the table table. If you use table{}, there will not be so many lines. Only the border lines will appear, and the lines in the middle will not. appears, so I added the td tag here to make it also display lines inside)
dotted: The dotted attribute defines a dotted border, so this appears More points. (Of course there are other attributes that also display borders, let’s take a look)
solid: The solid attribute defines a solid border
double: The double attribute defines a double-line border
dashed: The dashed attribute defines a dotted-line border
Everyone should be able to understand after reading this. In the picture, I only introduce one type of dotted border, as well as double-line borders and dotted-line borders. You can also try them one by one, and it will be obvious.
Now we continue to talk about border styles, of course there are several styles, otherwise how can we call it a summary:
border-spacing attribute Set the distance between the borders of adjacent cells
caption-side property sets the position of the table title
Today we will introduce two properties , plus the border-style attribute above, there are exactly three types. (Recommend the PHP Chinese website css Learning Manual column to learn more css style knowledge)
First look at the border-spacing attribute:
border The -spacing attribute sets the distance between the borders of adjacent cells (length horizontal spacing/length vertical spacing)
<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> is the same as the above picture, but this sets the vertical spacing, so what we see may not be consistent The same, so there is no rendering here. You can practice it yourself. Finally, there is a caption-side attribute. This is the position where the table title is set. It can be set above or below. This is fine.
So it is quite convenient to have these attributes. Well, we will introduce the following knowledge later.
Today’s article on the summary of adding border styles to css tables ends here (if you want to learn more about CSS styles, go to the PHP Chinese website css learning manual Column study), students who have questions can leave a message below to ask
[Editor’s recommendation]
How to set an unordered list in css? CSS list style summary
The above is the detailed content of How to add border style to css table? Summary of css table border styles (with complete examples). For more information, please follow other related articles on the PHP Chinese website!