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><table></td>
<td>Wraps all table elements</td>
</tr>
<tr>
<th>Table Caption</th>
<td><caption></td>
<td>Table description</td>
</tr>
<tr>
<th>Table Row</th>
<td><tr></td>
<td>Creates rows</td>
</tr>
<tr>
<th>Table Header</th>
<td><th></td>
<td>Defines column header</td>
</tr>
<tr>
<th>Table Data</th>
<td><td></td>
<td>Stores main data</td>
</tr>
<tr>
<th>Table Head</th>
<td><thead></td>
<td>Table header</td>
</tr>
<tr>
<th>Table Body</th>
<td><tbody></td>
<td>Wraps table body</td>
</tr>
<tr>
<th>Table Foot</th>
<td><tfoot></td>
<td>Table footer</td>
</tr>
<tr>
<th>Column Group</th>
<td><colgroup></td>
<td>Defines a group of columns</td>
</tr>
<tr>
<th>Column</th>
<td><col></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:
Element | Tag | Desription |
---|---|---|
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