CSS Tables

粉丝

1小时前1小时

行政经理

CSS Tables

HTML tables can be greatly improved with CSS:

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Königlich Essen	Philip Cramer	Germany
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Try it Yourself »

CSS Table Borders

The CSS border property is used to specify the width, style, and color of table borders.

The border property is a shorthand property for:

border-width - sets the width of the border
border-style - sets the style of the border (required)
border-color - sets the color of the border

The example below specifies a 1px solid border for <table>, <th>, and <td> elements:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table, th, td {
border: 1px solid;
}

Try it Yourself »

CSS Table Border Color

The example below specifies a 1px solid green border for <table>, <th>, and <td> elements:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table, th, td {
border: 1px solid green;
}

Try it Yourself »

Why Double Borders?

Notice that the tables in the examples above have double borders. This is because both the <table>, <th>, and <td> elements have separate borders.

To remove double borders, take a look at the example below.

CSS Collapse Table Borders

The CSS border-collapse property sets whether table borders should collapse into a single border or be separated as in standard HTML.

This property can have one of the following values:

separate - Default value. Borders are separated; each cell will display its own borders
collapse - Borders are collapsed into a single border when possible

The following table has collapsed borders:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

Using the border-collapse property:

table {
border-collapse: collapse;
}

Try it Yourself »

CSS Table Padding

To control the space between the border and the content in a table, use the padding property on <td> and <th> elements:

First Name	Last Name	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

th, td {
padding: 10px;
}

Try it Yourself »

CSS Border Spacing

The CSS border-spacing property sets the distance between the borders of adjacent cells.

Note: This property works only when border-collapse is set to "separate".

The following table has a border-spacing of 15px:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

Using the border-spacing property:

table {
border-collapse: separate;
border-spacing: 15px;
}

Try it Yourself »

CSS Outside Table Borders

If you just want a border around the table (not inside), you specify the border property only for the <table> element:

Firstname	Lastname
Peter	Griffin
Lois	Griffin

Example

table {
border: 1px solid;
}

Try it Yourself »

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

Sass Tutorial
Sass Tutorial

Cavalry发布主题在教程

Sass Tutorial Learn Sass Sass is a CSS pre-processor. Sass reduces repetition of CSS and therefore saves time. Start learning Sass now » 🏁 Tip: Sign in to track your progress. Examples in Each Chapter Our "Show Sass" tool makes it easy to learn Sass, it shows both the code and the result. Sass Example /* Define standard variables and values for website */ $bgcolor: lightblue; $textcolor: darkblue; $fontsize: 18px; /* Use the variables */ body { background-color: $bgcolor; color: $textcolor; font-size: $fontsize; } Run Example » Sass Function References At W3Schools you will find complete references of all Sass functions with syntax and examples. Sass String Functions Sass Numeric Functions Sass List Functions Sass Map Functions Sass Selector Functions Sass Introspection Functions Sass Color Functions ★ +1 Sign in to track progress
- 3分钟前3分钟
- 0篇回复
Responsive Web Design - Templates
Responsive Web Design - Templates

Cavalry发布主题在教程

Responsive Web Design - Templates W3.CSS Web Site Templates We have created some responsive templates with the W3.CSS framework. You are free to modify, save, share, and use them in all your projects. Tip: All templates below can be hosted with W3Schools Spaces. Band Template Demo Try it Yourself Art Template Demo Try it Yourself Architect Template Demo Try it Yourself Coming Soon Template Demo Try it Yourself Blog Template Demo Try it Yourself Food Blog Template Demo Try it Yourself Fashion Blog Template Demo Try it Yourself Gourmet Catering Template Demo Try it Yourself CV Template Demo Try it Yourself Wedding Invitation Template Demo Try it Yourself Photo Template Demo Try it Yourself Black & White Photo Template Demo Try it Yourself Photo III Template Demo Try it Yourself Nature Portfolio Template Demo Try it Yourself People Portfolio Template Demo Try it Yourself People Portfolio II Template Demo Try it Yourself Dark Portfolio Template Demo Try it Yourself Black & White Portfolio Template Demo Try it Yourself Parallax Template Demo Try it Yourself Clothing Store Template Demo Try it Yourself Interior Design Template Demo Try it Yourself Cafe Template Demo Try it Yourself Pizza Restaurant Template Demo Try it Yourself Modal Restaurant Template Demo Try it Yourself Start Page Template Demo Try it Yourself Startup Template Demo Try it Yourself App Launch Template Demo Try it Yourself Marketing Template Demo Try it Yourself Marketing / Website Template Demo Try it Yourself Web Page Template Demo Try it Yourself Social Media Template Demo Try it Yourself Analytics Template Demo Try it Yourself Apartment Rental Template Demo Try it Yourself Hotel Template Demo Try it Yourself Travel Template Demo Try it Yourself Travel Agency Template Demo Try it Yourself House Design Template Demo Try it Yourself Screen 50/50 Template Demo Try it Yourself Mail Template Demo Try it Yourself Kitchen Sink/Demo Template Black Red Teal Try it Yourself ★ +1 Sign in to track progress
- 3分钟前3分钟
- 0篇回复
Responsive Web Design - Frameworks
Responsive Web Design - Frameworks

Cavalry发布主题在教程

Responsive Web Design - Frameworks There are many free CSS Frameworks that offer Responsive Design. Using W3.CSS A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS W3.CSS makes it easy to develop sites that look nice at any size! W3.CSS Demo Resize the page to see the responsiveness! London London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Paris Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants. Tokyo Tokyo is the capital of Japan. It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. Example <!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container w3-blue"> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class="w3-row-padding"> <div class="w3-third"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="w3-third"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="w3-third"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </div> </body> </html> Try it Yourself » To learn more about W3.CSS, read our W3.CSS Tutorial. Bootstrap Another popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages: Example <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 5 Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container-fluid p-5 bg-primary text-white text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container mt-5"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html> Try it Yourself » To learn more about Bootstrap, go to our Bootstrap Tutorial. Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required ★ +1 Sign in to track progress
- 3分钟前3分钟
- 0篇回复

CSS Tables

推荐的帖子

CSS Tables

CSS Table Borders

Example

CSS Table Border Color

Example

Why Double Borders?

CSS Collapse Table Borders

Example

CSS Table Padding

Example

CSS Border Spacing

Example

CSS Outside Table Borders

Example

参与讨论

动态

Sass Tutorial

Responsive Web Design - Templates

Responsive Web Design - Frameworks

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)