Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created August 1, 2020 16:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/b53fd99bfb1f6ae1de72afa69b222247 to your computer and use it in GitHub Desktop.
Save codecademydev/b53fd99bfb1f6ae1de72afa69b222247 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!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>
Raw
styles.css
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