How do I add a border style to a CSS table? CSS table Border Style summary (with full instance)

Source: Internet
Author: User
This article is mainly about CSS table to add border style, here is a summary of CSS table border style, as well as a complete example of CSS table border. Let's take a look at this article next.





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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.