Unstyled HTML Tables Reference

In this example below you will see how to do a Unstyled HTML Tables Reference with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by KristinB, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KristinB ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Unstyled HTML Tables Reference</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>Unstyled HTML Tables Reference</h1>

<p>Tables have no borders by default (in modern browsers). Table widths (and heights) also conform to the dimensions of their contents by default.</p>
<p>The "caption" element can be used to label a table but is optional. The caption's position can be changed with CSS.</p>

<p><em>"Fork" this page to experiment with adding CSS to style tables.</em></p>

<hr />

<h2>Typical Table (table headers label each column):</h2>
<h3>Unstyled:</h3>

<table>
  <caption>Caption</caption>
  
  <thead>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
  </tbody>
</table>

<h3>With borders (to show structure):</h3>

<table class="borders">
  <caption>Caption</caption>
  
  <thead>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
  </thead>
  
  <tbody>
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
  </tbody>
</table>

<hr />

<h2>Less typical (table headers used to label each row):</h2>

<table>
  <caption>Caption</caption>
  
  <tbody>
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
  </tbody>
</table>

<h3>With borders (to show structure):</h3>

<table class="borders">
  <caption>Caption</caption>
  
  <tbody>
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
    
    <tr>
      <th>Table Header</th>
      <td>Table data</td>
      <td>Table data</td>
      <td>Table data</td>
    </tr>
  </tbody>
</table>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristinB/unstyled-html-tables-reference-xrOvNw */
.borders {
  border: 1px dotted;
}
.borders * {
  border: 1px dotted;
}

Comments