html table borders

HTML Tutorials

HTML Introduction HTML Headings HTML Paragraphs HTML Formatting HTML Links

HTML Images

HTML Tables

HTML Lists

HTML Block & Inline HTML Classes HTML Id HTML Iframes HTML JavScript HTML File Paths HTML Head HTML Layout HTML Responsive

HTML Table Borders

Previous Next

HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

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

Example:

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

Try it Yourself

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:

table, th, td {
border: 1px solid black;
border-collapse: collapse;

Try it Yourself

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:

Round 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-radius: 10px;
border: 1px solid black;
{

Try it Yourself

Dotted Table Borders

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

The following values are allowed:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
outset

Example:

th, td {
border-style: dotted;
}

Try it Yourself

Border Color

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

Example:

th, td {
border-color: #96D4D4;
}

Try it Yourself

Previous Next

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: shaurya.y321@gmail.com

Forum | About

LearnToCode 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 LearnToCode, you agree to have read and accepted our terms of use, cookie and privacy policy.