Web Front-endCSS TutorialHow 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)
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!
A Little Reminder That Pseudo Elements are Children, Kinda.Apr 19, 2025 am 11:39 AMHere's a container with some child elements:
Menus with 'Dynamic Hit Areas'Apr 19, 2025 am 11:37 AMFlyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you're in tricky territory. For one, they should
Improving Video Accessibility with WebVTTApr 19, 2025 am 11:27 AM"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."- Tim Berners-Lee
Weekly Platform News: CSS ::marker pseudo-element, pre-rendering web components, adding Webmention to your siteApr 19, 2025 am 11:25 AMIn this week's roundup: datepickers are giving keyboard users headaches, a new web component compiler that helps fight FOUC, we finally get our hands on styling list item markers, and four steps to getting webmentions on your site.
Making width and flexible items play nice togetherApr 19, 2025 am 11:23 AMThe short answer: flex-shrink and flex-basis are probably what you’re lookin’ for.
Weekly Platform News: HTML Inspection in Search Console, Global Scope of Scripts, Babel env Adds defaults QueryApr 19, 2025 am 11:18 AMIn this week's look around the world of web platform news, Google Search Console makes it easier to view crawled markup, we learn that custom properties
IndieWeb and WebmentionsApr 19, 2025 am 11:16 AMThe IndieWeb is a thing! They've got a conference coming up and everything. The New Yorker is even writing about it:
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
