Tables in HTML

<caption> </caption> inside of table

• visible to eyes
  <caption> element let's the screen readers read it first before deciding if whether the table is worth reading or not.

<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>
</table>
Copy

Mark up header, footer and body section
All of this must be under the <tr> table row tag

• <thead> - put it outside of <th>
• <tfoot> - makes the <tr>, row go at the bottom

<tbody> - this will be the rest of the content.

These elements don't make the table any more accessible to screen reader users, and don't result in any visual enhancement on their own. They are however very useful for styling and layout — acting as useful hooks for adding CSS to your table.

<tbody> is always included in every table, implicitly if you don't specify it in your code. Meaning every HTML will automatically nest <tr>, <td> with <tbody>

Automatically apply CSS properties to specific tables
Use the following to group stylings of tables inside of <table> </table>

• <colgroup> </colgroup> -
• <col/>

Attributes of <col/>

• style="" css styling properties
• span=""

Example:

<table>
    <colgroup>
      <col />  # 1st header won't be colored
      <col style="background-color: yellow" /> # 2nd header yellow
    </colgroup>
    <tr>
      <th>Data 1</th> # 1st Header -> no color
      <th>Data 2</th> # 2nd Header -> yellow
    </tr>
</table>
Copy