CSS Table Border
CSS Table Borders
In web design, tables are a common element used to display data or layout content. Using CSS styles, we can customize the appearance of tables, including the style, color, and width of their borders. This article will detail how to use CSS to control table borders.
1. Setting Table Border Styles
Using the CSS border property, we can set the style of a table’s borders. Here’s a simple example code showing how to set a solid border around a table:
<!DOCTYPE html>
html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we use border-collapse: collapse; to collapse the borders of adjacent cells, making the table look neater. Then, we use border: 1px solid black; to set the cell borders to a 1-pixel solid black border.
2. Setting the Table Border Color
In addition to setting the border style, we can also set the border color using CSS. Here is a sample code showing how to set the table border color to red:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we set the table border color to red. Simply change the red in border: 1px solid red; to a different color.
3. Setting the Table Border Width
In addition to style and color, we can also use CSS to set the width of table borders. Here’s a sample code showing how to set a table border width of 2 pixels:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 2px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the above example, we set the table border width to 2 pixels. Simply change the 2px in border: 2px solid black; to a different width.
4. Setting Table Border Styles
In addition to solid borders, CSS supports other border styles, such as dashed and dotted lines. Here’s a sample code showing how to set a table’s border to dashed:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px dashed black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we set the table border style to dashed. Simply change the value of dashed in border: 1px dashed black; to another style value.
5. Radiuse Table Borders
Using the CSS border-radius property, we can set the rounded corners of table borders. Here is a sample code showing how to set the border of a table to rounded corners:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we use border-radius: 10px; to round the table’s borders to 10 pixels. You can adjust the radius as needed.
6. Setting Table Border Transparency
Using the CSS opacity property, we can set the transparency of the table’s borders. Here is a sample code showing how to set the transparency of a table border to 0.5:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
opacity: 0.5;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the above example, we set the table border to semi-transparent with opacity: 0.5;. You can adjust the transparency value as needed.
7. Setting Table Border Shadows
Using the CSS box-shadow property, we can add a shadow effect to the table border. Here’s a sample code showing how to add a shadow to a table’s borders:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
box-shadow: 5px 5px 5px grey;
}
td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we use box-shadow: 5px 5px 5px grey; to add a 5-pixel offset, a 5-pixel blur radius, and a gray shadow to the table border. Feel free to adjust the shadow parameters as needed.
8. Setting Table Border Spacing
Using the CSS padding property, we can set the spacing between table borders and cell content. Here’s a sample code showing how to set the border spacing of a table to 10 pixels:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the above example, we set a 10-pixel padding between the table border and the cell content using padding: 10px;. You can adjust the padding as needed.
9. Setting the Background Color of Table Borders
Using the CSS background-color property, we can set the background color of the table border. Here’s a sample code showing how to set the background color of a table’s border to gray:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
background-color: lightgrey;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
In the example above, we set a gray background color for the table border using background-color: lightgrey; . You can adjust the background color as needed.