Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 11, 2020 19: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/ec958605982b9c85b16b9757f03c8cac to your computer and use it in GitHub Desktop.
Save codecademydev/ec958605982b9c85b16b9757f03c8cac to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Cheat Sheet | HTML Tables</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>My Cheat Sheet for HTML tables</h1>
<h2>Table tags</h2>
<div>
<Table class="main table">
<thead>
<tr>
<th>Element</th>
<th>Tag</th>
<th>Definition</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table</td>
<td class="table-tag"><span>&lt;table&gt;</span></td>
<td>The wrapper element for all HTML tables.</td>
</tr>
<tr>
<td>Table head</td>
<td class="table-tag"><span>&lt;thead&gt;</span></td>
<td>The set of rows defining the column headers in a table.</td>
</tr>
<tr>
<td>Table body</td>
<td class="table-tag"><span>&lt;tbody&gt;</span></td>
<td>The set of rows containing actual table data.</td>
</tr>
<tr>
<td>Table footer</td>
<td class="table-tag"><span>&lt;tfoot&gt;</span></td>
<td>The set of rows defining the footer in a table.</td>
</tr>
<tr>
<td>Table row</td>
<td class="table-tag"><span>&lt;tr&gt;</span></td>
<td>The table row container.</td>
</tr>
<tr>
<td>Table heading</td>
<td class="table-tag"><span>&lt;th&gt;</span></td>
<td>To recognize the table headers as headers, both visually and semantically.</td>
</tr>
<tr>
<td>Table data</td>
<td class="table-tag"><span>&lt;td&gt;</span></td>
<td>The table row container.</td>
</tr>
</tbody>
</Table>
</div>
<br>
<br>
<h2>Table Attributes</h2>
<div>
<table class="secondary table">
<thead>
<tr>
<th colspan="2">Table Attributes</th>
</tr>
<tr>
<th>colspan</th>
<th>rowspan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Defines how many columns a td element should span. <br>
It's tag is <span>&lt;colspan&gt;</span></td>
<td>Defines how many rows a td element should span. <br>
It's tag is <span>&lt;rowspan&gt;</span></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Raw
styles.css
body{
background-color: rgb(238, 234, 234);
}
h1{
color: rgb(17, 100, 100);
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}
h2{
color: rgb(17, 100, 100);
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
div{
display: flex;
justify-content: center;
align-items: center;
}
table{
position: relative;
border-collapse: collapse;
}
/*table[class$="table"]{
position: absolute;
left: 40%;
}*/
th, td{
border: 1px solid rgb(17, 100, 100);
}
th{
color: white;
background-color: rgb(24, 163, 182);
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
padding: 10px;
}
.table-tag{
text-align: center;
}
span{
background-color: rgb(212, 212, 192);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment