Css table border with class

Table Border

This page demonstrates how to set the table border within your web pages and other HTML documents.

In HTML, there are two ways of adding a border to your tables. The first is to use the HTML border attribute. The other is to use CSS.

Below are some examples of applying a table border in HTML.

HTML Table Border

You can get a quick border around your table by using the HTML border attribute. You determine the width of the border using a number. For example, for a thin border, use the number «1». For a thicker border, use a greater number.

As you can see, this is a quick and easy way to get a table border, but you don’t actually have any control over the way the border looks. The way it looks will depend on the user’s browser and you won’t be able to change it. Unless.

If you want to change the way your table border looks, you can use CSS. CSS allows you to change the color, width, and style of your table borders.

Using CSS, you use the border property to define the table border. You can apply this property against the whole table or each cell (or a single cell, if that’s what you prefer).

CSS Table Border

You can also change the border style to thick, dotted, dashed, or anything that CSS understands. You can change its color too. Here’s some examples:

Borders on Table Cells

To the table cells within the table, you need to apply the border code against the individual table cells.

In the following example, I’ve applied a border against the table cells and the table header cells. I’ve also applied a different colored border around the table (as I did in the previous example). The different color will help distinguish between the table border and the cell borders:

Border Collapse

You can remove the space between the different borders by using the CSS border-collapse property. You can apply this property against the HTML table element.

When you apply this against the table element, you’ll notice that the table border simply disappears, or «collapses». You’ll also notice that the space between the cells collapse too.

Using CSS Classes

If you’re familiar with HTML and CSS, you’ll probably know about the benefits of CSS classes. CSS classes allow you to set all your styles in one place, rather than adding them to each HTML element as you code. This saves time in coding and time in maintaining your website. It also reduces the possibility of error, helps with download time, and helps keep your code nice and clean.

Here’s an example of using an embedded style sheet to define the border of your HTML tables. Note that the styles are set in between the opening and closing tags.

Another Example

Here are more examples of using CSS borders around your HTML tables.

Источник

W3.CSS Tables

The w3-table class is used to display a basic table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Striped Table

The w3-striped class is used to add zebra-stripes to a table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Bordered Table

The w3-bordered class adds a bottom border to each table row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Striped Bordered Table

Combine the w3-striped class and the w3-bordered class to create a striped bordered table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Border Around a Table

The w3-border class is used to display a border around a table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Tip: The w3-border class is not only for tables. It can be used on any HTML element!

Displaying it All

The w3-table-all class combines all of the classes above:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Flipping the Stripes

To flip the stripes (start with the light-grey color), add a element around the table header row. You must also define a color to be used for the table header row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67
Bo	Nilson	35

Example

Centering all Content

The w3-centered class centers the content of the table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Centering one Column

The w3-center class centers the content of a column:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Right Align one Column

The w3-right-align class right aligns the content of a column:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Hoverable Table

The w3-hoverable class adds a grey background color on mouse-over:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Hover Colors

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Combining W3.CSS Classes

Many W3.CSS classes can be used on all HTML elements.

For example: border classes, color classes, font classes, card classes, and more.

Colored Table Header

Use any of the w3-color classes to display a colored row:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Colored Table

Use any of the w3-color classes to display a colored table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Responsive Table

The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.

Resize the screen to see the effect on the table below:

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000	5000
Eve	Jackson	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400	9400
Adam	Johnson	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700	6700

Example

Table as a Card

Use a w3-card class to display a table as a card:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Tiny Table

Use the w3-tiny class to display a tiny table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Small Table

Use the w3-small class to display a small table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Large Table

Use the w3-large class to display a large table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

XLarge Table

Use the w3-xlarge class to display an xlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

XXLarge Table

Use the w3-xxlarge class to display an xxlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

XXXLarge Table

Use the w3-xxxlarge class to display an xxxlarge table:

First Name	Last Name	Points
Jill	Smith	50
Eve	Jackson	94
Adam	Johnson	67

Example

Jumbo Table

Use the w3-jumbo class to display a jumbo large table:

First Name	Last Name
Jill	Smith
Eve	Jackson
Adam	Johnson

Источник

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

To add a border, use the CSS border property on table , th , and td elements:

Example

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse .

This will make the borders collapse into a single border:

Example

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

table, th, td <
border: 1px solid white;
border-collapse: collapse;
>
th, td <
background-color: #96D4D4;
>

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Skip the border around the table by leaving out table from the css selector:

Example

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Example

Border Color

With the border-color property, you can set the color of the border.

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник