How HTMLHTML Table Border Style
HTML tables are a versatile way to display data in a structured format on a webpage. One important aspect of table design is the styling of borders. In this article, we will explore various ways to style the borders of HTML tables using CSS.
Basic Table Border
The basic way to add borders to a table in HTML is by using the border attribute within the table tag. The value of the border attribute specifies the width of the table border.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Style Table Borders with CSS
To have more control over the styling of table borders, we can use CSS. We can target specific elements such as table, th, td, and tr to customize the border properties.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
</body>
</html>
Output:
Changing Border Color
We can also change the color of the table borders by specifying the border-color property in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid red;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Table Cell 1</td>
<td>Table Cell 2</td>
</tr>
<tr>
<td>Table Cell 3</td>
<td>Table Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Style
In addition to color, we can also change the style of the table borders using the border-style property. This property allows us to set different styles such as solid, dotted, dashed, etc.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid green;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Example Cell 1</td>
<td>Example Cell 2</td>
</tr>
<tr>
<td>Example Cell 3</td>
<td>Example Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Width
To change the width of the table borders, we can use the border-width property in CSS. We can specify the width in pixels, em, or other units.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 3px solid blue;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Example Cell 1</td>
<td>Example Cell 2</td>
</tr>
<tr>
<td>Example Cell 3</td>
<td>Example Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Radius
We can also add rounded corners to the table borders using the border-radius property in CSS. This property allows us to create a curved border effect.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid purple;
border-radius: 10px;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Collapse
The border-collapse property in CSS controls the visibility of the borders between table cells. There are two values for this property: collapse and separate.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid orange;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
<style>
table {
border-collapse: separate;
width: 100%;
}
td {
border: 1px solid pink;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
</body>
</html>
Output:
Border spacing
The border-spacing property in CSS allows us to control the space between table cells when the border-collapse property is set to separate.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: separate;
border-spacing: 10px;
width: 100%;
}
td {
border: 1px solid cyan;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Bottom
We can style the bottom border of table cells using the border-bottom property in CSS. This allows us to apply different styles, colors, and widths to just the bottom border.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border-bottom: 2px dashed brown;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Top
Similar to border-bottom, we can style the top border of table cells using the border-top property in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border-top: 2px solid grey;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Left and Right
We can also style the left and right borders of table cells using the border-left and border-right properties in CSS.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border-left: 2px dotted teal;
border-right: 2px double navy;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Image
Instead of using solid colors or styles for borders, we can use images as borders using the border-image property in CSS. The border-image-source property specifies the image to use as the border.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 10px solid transparent;
border-image-source: url('border-image.png');
border-image-slice: 30;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Border Shadow
We can create a shadow effect for table borders using the box-shadow property in CSS. This property allows us to add shadows to elements, giving them depth and dimension.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
box-shadow: 5px 5px 5px grey;
}
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Responsive Table Borders
To make table borders responsive and adapt to different screen sizes, we can use media queries in CSS. Media queries allow us to apply different styles based on the screen width.
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid red;
padding: 8px;
text-align: center;
}
@media screen and (max-width: 600px) {
td {
border: none;
border-bottom: 1px solid blue;
}
}
</style>
</head>
<body>
<table>
<tr>
<td>Mobile Cell 1</td>
<td>Mobile Cell 2</td>
</tr>
<tr>
<td>Mobile Cell 3</td>
<td>Mobile Cell 4</td>
</tr>
</table>
</body>
</html>
Output:
Summary
In this article, we explored various ways to style the borders of HTML tables using CSS. We learned how to change the color, style, width, radius, collapse, spacing, and position of table borders. By combining these techniques, you can create visually appealing tables on your webpages. Experiment with different border styles to find the look that best suits your design aesthetic.
Remember, the key to effective table border styling is to balance functionality with aesthetics, ensuring that the borders enhance the readability and organization of the data presented. Play around with different border properties and get creative with your table designs!