<h1>What We've learned so far</h1>
<p>The following table summarizes all <abbr title="Hyper Text Markup Language">HTML</abbr> elements We've learned so far.</p>
<table>
<caption>Table elements I've learned</caption>
<thead>
<tr>
<th class="primary">Element</th>
<th class="primary">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">The root element</th>
</tr>
<tr>
<td>table</td>
<td>which is the main container.</td>
</tr>
<tr>
<td>td</td>
<td>used to create data cells.</td>
</tr>
<tr>
<td>tr</td>
<td>represents the rows.</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">Table Heading</th>
</tr>
<tr>
<td>th</td>
<td>Add a table heading</td>
</tr>
<tr>
<td>thead</td>
<td>used to create a separate header for a table</td>
</tr>
</tbody>
<tbody>
<tr>
<th colspan="2" scope="rowgroup">Other attributes</th>
</tr>
<tr>
<td>scope</td>
<td>identifies whether a cell is a header for a column, row, or group of columns or rows</td>
</tr>
<tr>
<td>caption</td>
<td>provide a description about the data presented in a table</td>
</tr>
<tr>
<td>colspan & rowspan</td>
<td>stretches two or more cells across a table.</td>
</tr>
<tr>
<td>tbody</td>
<td>it indicates the main body of the table.</td>
</tr>
<tr>
<td>tfoot</td>
<td>Used to create separate footer for the table</td>
</tr>
</tbody>
</table>
td, th {
border: 1px solid #999;
padding: 20px;
}
td{
background: gray;
color: white;
}
.primary{
background-color: brown;
position: sticky;
}
th {
background: #ffc107;
color: white;
border-radius: 0;
top: 0;
padding: 10px;
}
tbody > tr:hover {
background-color: #ffc107;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.