DP
View all posts
Simple HTML Table

You can make a standard HTML table using the appropriate table elements.

Here is the code for a basic version of such table:

HTML

<table>
  <caption>
    HTML Table Elements
  </caption>
  <colgroup>
    <col class="firstCol" />
    <col span=2 class="secondCol" />
  </colgroup>
  <thead>
    <tr>
      <th>Element</th>
      <th>Tag</th>
      <th>Desription</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Table</th>
      <td>&lt;table&gt;</td>
      <td>Wraps all table elements</td>
    </tr>
    <tr>
      <th>Table Caption</th>
      <td>&lt;caption&gt;</td>
      <td>Table description</td>
    </tr>
    <tr>
      <th>Table Row</th>
      <td>&lt;tr&gt;</td>
      <td>Creates rows</td>
    </tr>
    <tr>
      <th>Table Header</th>
      <td>&lt;th&gt;</td>
      <td>Defines column header</td>
    </tr>
    <tr>
      <th>Table Data</th>
      <td>&lt;td&gt;</td>
      <td>Stores main data</td>
    </tr>
    <tr>
      <th>Table Head</th>
      <td>&lt;thead&gt;</td>
      <td>Table header</td>
    </tr>
    <tr>
      <th>Table Body</th>
      <td>&lt;tbody&gt;</td>
      <td>Wraps table body</td>
    </tr>
    <tr>
      <th>Table Foot</th>
      <td>&lt;tfoot&gt;</td>
      <td>Table footer</td>
    </tr>
    <tr>
      <th>Column Group</th>
      <td>&lt;colgroup&gt;</td>
      <td>Defines a group of columns</td>
    </tr>
    <tr>
      <th>Column</th>
      <td>&lt;col&gt;</td>
      <td>Defines columns in column group</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Number of elements:</th>
      <td>10</td>
    </tr>
  </tfoot>
</table>

CSS

Slightly adjusted for a basic example.

table {
  border: 5px solid black;
  border-collapse: collapse;
  text-align: center;
}

caption {
  caption-side: bottom;
  margin-top: 5px;
  font-style: italic;
}

thead,
tfoot {
  background-color: rgba(0, 0, 0, 0.3);
}

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

td {
  text-align: left;
}

.firstCol {
  background-color: rgba(0, 0, 0, 0.2);
}

.secondCol {
  background-color: rgba(0, 0, 0, 0.1);
}

And here is the final result:

HTML Table Elements
ElementTagDesription
Table<table>Wraps all table elements
Table Caption<caption>Table description
Table Row<tr>Creates rows
Table Header<th>Defines column header
Table Data<td>Stores main data
Table Head<thead>Table header
Table Body<tbody>Wraps table body
Table Foot<tfoot>Table footer
Column Group<colgroup>Defines a group of columns
Column<col>Defines columns in column group
Number of elements:10

If you want a more detailed explanation for each HTML element, you can check this article on my Medium blog.

Thank you for reading.


Read my stories on Medium

I write every Friday and share what I work on and learn.

@Dimterion
Visit my blog