Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created Aug 1, 2020
Embed
What would you like to do?
Codecademy export
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="wrapper">
<header>
<h1> HTML Table Reference </h1>
</header>
<main>
<table class="table-1">
<caption>
Table Tags
</caption>
<thead>
<tr>
<th> Tag </th>
<th> Name </th>
<th> Description </th>
</tr>
</thead>
<tbody>
<tr>
<td class="tag"> &lt;table&gt; </td>
<td> Table </td>
<td> The wrapper for all HTML tables. </td>
</tr>
<tr>
<td class="tag"> &lt;thead&gt; </td>
<td> Table Head </td>
<td> The set of rows defining the column headers in the table. </td>
</tr>
<tr>
<td class="tag"> &lt;tbody&gt; </td>
<td> Table Body </td>
<td> The set of rows containing actual table data. </td>
</tr>
<tr>
<td class="tag"> &lt;tr&gt; </td>
<td> Table row </td>
<td> The table row container. </td>
</tr>
<tr>
<td class="tag"> &lt;td&gt; </td>
<td> Table Data </td>
<td> The table row container. </td>
</tr>
<tr class="last">
<td class="tag"> &lt;tfoot&gt; </td>
<td> Table foot </td>
<td> The set of rows defining the footer in the table. </td>
</tr>
</tbody>
</table>
<table class="table-2">
<caption>
Table Attributes
</caption>
<thead>
<tr>
<th> Attribute </th>
<th> Name </th>
<th> Description </th>
</tr>
</thead>
<tbody>
<tr>
<td class="tag"> colspan </td>
<td> Column span </td>
<td> Defines how many columns a td element should span. </td>
</tr>
<tr class="last">
<td class="tag"> rowspan </td>
<td> Row span </td>
<td> Defines how many rows a td element should span. </td>
</tr>
</tbody>
</table>
</main>
</div>
</body>
</html>
body{
background-color: mintcream;
font-family: monospace;
}
.wrapper{
width: 85%;
margin: 20% auto;
padding: 20px;
text-align: center;
}
.table-1{
border: 2px solid mediumpurple;
text-align: left;
}
.table-1 caption,
.table-2 caption{
font-size: 22px;
color: tomato;
text-transform: uppercase;
}
thead th{
background-color: powderblue;
border-bottom: 2px solid mediumpurple;
text-align: center;
}
.tag{
background-color: mistyrose;
border-bottom: 2px solid mediumpurple;
}
tbody td{
border-bottom: 2px solid mediumpurple;
padding: 5px;
margin: 5px;
}
.table-2{
border: 2px solid mediumpurple;
margin-top: 30px;
}
.last td{
border-bottom: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.