Sample CSS

Last updated: Sat, 17 May 2025

Table of contents
⊕ This is the link to the W3C's HTML validator:
https://validator.w3.org/nu/
⊕ This CSS draws a single-line border around a table, and draws horizontal lines between rows, and shades the column headings:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Table with Single Line Borders</title>
<style>
table
{
    border-collapse: collapse;
    width: 100%;
}

th, td
{
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}

th
{
    background-color: #f2f2f2;
}
</style>
</head>
<body>
</body>
<table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>More data 1</td>
        <td>More data 2</td>
        <td>More data 3</td>
      </tr>
      <tr>
        <td>Yet more data 1</td>
        <td>Yet more data 2</td>
        <td>Yet more data 3</td>
      </tr>
      </tbody>
</table>
</html>

Result:
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
More data 1 More data 2 More data 3
Yet more data 1 Yet more data 2 Yet more data 3

Notes:
If you wish to use a class attribute in the HTML <table> statement, make these changes:
1. In the CSS style part, table becomes .table or .xyz
2. In the HTML part, <table> becomes <table class='table'> or <table class='xyz'>
⊕ This JS loads a HTML fragment into a div:

... Some HTML ...
<div id = 'target'></div>
<script>
    fetch('/misc/fragment.html')
    .then(response => response.text() )
    .then(data =>
    {
    document.getElementById('target').innerHTML = data;
    });
</script>
... Some more HTML ...

Notes:
1. The div id 'target' and the file name 'fragment' (/misc/fragment.html) clearly do not have to be the same
⊕ Some confusable HTML entities:
Unicode Utilities: Confusables
⊕ Some useful HTML entities:
/misc/unicode.html