Getting the Old HTML Table Border with CSS

In the early days of web development, HTML tables were commonly used for layout purposes, and they had a simple way to define borders directly in the HTML using attributes like border. However, as web standards evolved, the use of CSS for styling became the norm. With CSS, we can recreate the look of those old HTML table borders in a more flexible and maintainable way. This blog post will explore the fundamental concepts, usage methods, common practices, and best practices of using CSS to get the old HTML table border look.

Table of Contents

  1. Fundamental Concepts
  2. Usage Methods
  3. Common Practices
  4. Best Practices
  5. Conclusion
  6. References

Fundamental Concepts

HTML Tables

An HTML table consists of rows (<tr>), cells (<td> or <th>), and a table container (<table>). In the old way, you could set a border around the table and its cells using the border attribute directly in the HTML tag. For example:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

CSS Borders

CSS provides the border property to style the borders of HTML elements. The border property is a shorthand for border-width, border-style, and border-color. For example:

table {
  border: 1px solid black;
}

This code sets a 1-pixel-wide, solid black border around the table.

Usage Methods

Styling the Table Itself

To give the table a border similar to the old HTML border attribute, you can use the following CSS:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    table {
      border: 1px solid black;
      border-collapse: collapse;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>30</td>
    </tr>
  </table>
</body>

</html>

In this example, the border-collapse: collapse; property is used to merge the borders of adjacent cells, giving a more consistent look.

Styling Table Cells

To add borders to individual table cells, you can target the <td> and <th> elements:

td,
th {
  border: 1px solid black;
}

Combining this with the table border styling, the full code would be:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    table {
      border: 1px solid black;
      border-collapse: collapse;
    }

    td,
    th {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>City</th>
      <th>Population</th>
    </tr>
    <tr>
      <td>New York</td>
      <td>8.4 million</td>
    </tr>
  </table>
</body>

</html>

Common Practices

Using Different Border Styles

You can use different border styles such as dotted, dashed, or double to create unique looks. For example:

table {
  border: 2px double red;
  border-collapse: collapse;
}

td,
th {
  border: 1px dotted blue;
}

Adjusting Border Widths

You can adjust the border widths to make the borders thicker or thinner. For instance:

table {
  border: 3px solid green;
  border-collapse: collapse;
}

td,
th {
  border: 0.5px solid gray;
}

Best Practices

Separate CSS from HTML

It’s a good practice to keep your CSS in a separate file. This makes your code more organized and easier to maintain. For example, you can create a styles.css file:

/* styles.css */
table {
  border: 1px solid black;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid black;
}

And then link it to your HTML file:

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <table>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Book</td>
      <td>$20</td>
    </tr>
  </table>
</body>

</html>

Use Classes or IDs for Specific Tables

If you have multiple tables on your page and you want to style them differently, use classes or IDs. For example:

<!DOCTYPE html>
<html lang="en">

<head>
  <style>
   .special-table {
      border: 2px solid purple;
      border-collapse: collapse;
    }

   .special-table td,
   .special-table th {
      border: 1px solid purple;
    }
  </style>
</head>

<body>
  <table class="special-table">
    <tr>
      <th>Item</th>
      <th>Quantity</th>
    </tr>
    <tr>
      <td>Pen</td>
      <td>10</td>
    </tr>
  </table>
</body>

</html>

Conclusion

Using CSS to get the old HTML table border look is a straightforward process. By understanding the fundamental concepts of CSS borders and applying the appropriate usage methods, common practices, and best practices, you can create tables with borders that are both visually appealing and easy to maintain. Whether you’re recreating an old - school look or just need a simple table border, CSS provides the flexibility to achieve your desired result.

References