Loading lesson path
HTML tables can have borders of different styles and shapes.
To add a border, use the CSS border property on table, th, and td elements:
Example table, th, td
{
border: 1px solid black;
}To avoid having double borders like in the example above, set the CSS
Formula
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;
}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;
}Formula
With the border - radius property, the borders get rounded corners:Example table, th, td {
border: 1px solid black;
border-radius: 10px;
}Skip the border around the table by leaving out table from the css selector:
Example th, td {
border: 1px solid black;
border-radius: 10px;
}Formula
With the border - style property, you can set the appearance of the border.dotted dashed solid double groove ridge inset outset none hidden
Example th, td {
border-style: dotted;
}Formula
With the border - color property, you can set the color of the border.Example th, td {
border-color: #96D4D4;
}