HTML Table Border Style-How HTML

HTML 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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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:

HTML Table Border Style

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!