HTML Table Border-How HTML

HTML Table Border

When creating tables in HTML, styling options are important to ensure the table is easy to read and visually appealing. One styling option is to add borders to the table, which can help separate the content and make it easier to distinguish rows and columns. In this article, we will explore how to add borders to HTML tables using the border attribute.

Setting Border Attribute

The border attribute is used to specify the width of the border around the table and its cells. A value of 0 means no border, while higher values increase the thickness of the border.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
  <tr>
    <td>Example 1</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Color

To change the color of the border, we can use CSS. The border-color property can be applied to the table, individual cells, or rows.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px solid red;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 2</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Style

The border-style property in CSS can be used to set different styles for the border, such as solid, dotted, dashed, etc.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px dotted blue;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 3</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Uneven Borders

We can set different border widths for different sides of the table using the border-top, border-bottom, border-left, and border-right properties in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 2px solid green;
    border-top: 1px dashed orange;
    border-bottom: 3px solid purple;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 4</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Collapse

The border-collapse property in CSS can be used to collapse or separate the borders between table cells.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 5</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Double Border

To create a double border around the table, we can use the border property twice with different colors.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 2px double cyan;
    border-collapse: collapse;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 6</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Radius

The border-radius property in CSS can be used to create rounded corners for the table borders.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px solid black;
    border-radius: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 7</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Image

Custom border images can be used for tables using the border-image property in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-image: url('border.png') 30 round;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 8</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Spacing

The border-spacing property in CSS can be used to set the space between the cells in the table.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: separate;
    border-spacing: 5px;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 9</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Width

The border-width property in CSS can be used to set the width of the borders around the table and its cells.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px solid black;
  }
  td {
    border-width: 2px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 10</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Radius with Specific Corners

To create rounded corners on specific sides of the table, we can use the border-radius property with individual values.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px solid black;
    border-radius: 10px 0 10px 0;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 11</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Color with Specific Sides

To set different border colors for specific sides of the table, we can use individual border properties in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-top: 1px solid red;
    border-bottom: 2px dashed blue;
    border-left: 3px dotted green;
    border-right: 4px double purple;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 12</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Style with Specific Sides

To apply different border styles to specific sides of the table, we can use specific border properties in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-top-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
    border-right-style: solid;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 13</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Width with Specific Sides

To set different border widths for specific sides of the table, we can use individual border properties in CSS.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-top-width: 1px;
    border-bottom-width: 2px;
    border-left-width: 3px;
    border-right-width: 4px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 14</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Collapse Separate

To separate the borders between table cells, we can use the border-collapse property with a value of separate.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: separate;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 15</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

No Border

To remove borders from the table and its cells, we can set the border property to 0.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 0;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 16</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Collapse Collapse

To collapse the borders between table cells, we can use the border-collapse property with a value of collapse.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border-collapse: collapse;
  }
  td {
    border: 1px solid black;
    padding: 10px;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 17</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Style Hidden

To hide the table borders, we can use the border-style property with a value of hidden.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px hidden black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 18</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Border Color Transparent

To make the table borders transparent, we can set the border-color property to transparent.

<!DOCTYPE html>
<html>
<head>
<style>
  table {
    border: 1px solid transparent;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td>Example 19</td>
    <td>how2html.com</td>
  </tr>
</table>
</body>
</html>

Output:

HTML Table Border

Summary

In this article, we have explored various ways to customize the borders of HTML tables using CSS. By adjusting the border width, style, color, spacing, and other properties, we can create visually appealing tables that are easy to read and navigate. Experimenting with different border settings can help enhance the overall design and layout of tables on a webpage.

HTML Table Border