Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created October 11, 2020 19:02
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/d20f0b5dc015632c82b2d94abc3469c9 to your computer and use it in GitHub Desktop.
Save codecademydev/d20f0b5dc015632c82b2d94abc3469c9 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Tables in HTML & CSS</title>
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
<header>
<h1> Build Tables with HTML & CSS<br><em>Cheat sheet No.1</em></h1>
</header>
<body>
<div>
<h2></h2>
<br>
<br>
<p class="learn"><em>"Keep calm, make notes and do practise"</em></p>
<br>
</div>
<div>
<h2>How to build Table in HTML</h2>
<h3>Table Tags</h3>
<!--1st Table-->
<table>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>table</td>
<td>The wrapper element for all HTML tables.</td>
</tr>
<tr>
<td>thead</td>
<td>The set of rows defining the column headers in a table.</td>
</tr>
<tr>
<td>tbody</td>
<td>The set of rows containing actual table data.</td>
</tr>
<tr>
<td>tr</td>
<td>The table row container.</td>
</tr>
<tr>
<td>td</td>
<td>The table row container.</td>
</tr>
<tr>
<td>tfoot</td>
<td>The set of rows defining the footer in a table.</td>
</tr>
</tbody>
</table>
<!--2nd Table-->
<h3>Table Attributs</h3>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>colspan</td>
<td>Defines how many columns a td element should span.</td>
</tr>
<tr>
<td>rowspan</td>
<td>Defines how many rows a td element should span.</td>
</tr>
</tbody>
</table>
<h2>Improve the look with CSS</h2>
<!--3rd Table-->
<table>
<tr>
<th>Command</th>
<th>Description</th>
</tr>
<tr>
<td>
table {<br>
border-collapse: collapse;<br>
margin-left:auto; <br>
margin-right:auto;<br>
}<br>
</td>
<td>Position of the table in the center of the page.</td>
</tr>
<tr>
<td>
td, th {<br>
border: 1px solid white;<br>
padding: 0.5rem;<br>
text-align: left;<br>
}<br>
</td>
<td>Define the borders of the table & the text inside.</td>
</tr>
<tr>
<td>
th{<br>
background-color: lightpink;<br>
}<br>
</td>
<td>Color of the first raw.</td>
</tr>
<tr>
<td>
td{<br>
background-color:white<br>
</td>
<td>Color of the raws excluding the 1st raw.</td>
</tr>
</table>
<h2>Useful Links</h2>
<ul>
<li> <a href="https://www.codecademy.com" target="_blank">Codecademy</a></li>
<li><a href="https://css-tricks.com/complete-guide-table-element/">HTML&CSS with visual examples No1</a></li>
<li><a href="https://www.w3schools.com/css/css_table.asp">HTML&CSS with visual examples No2</a></li>
</ul>
</div>
</body>
<footer>
<h6>written by: <em>Angelina</em></h6>
</footer>
</html>
Raw
styles.css
body{
background-color:Mistyrose;
}
header{
color:maroon;
text-align:center;
}
h2{
color:maroon;
}
h3{
color:antracite;
text-align:center;
}
.learn{
text-align:right;
font-size:20px;
color:black;
}
table {
border-collapse: collapse;
margin-left:auto;
margin-right:auto;
}
td, th {
border: 1px solid white;
padding: 0.5rem;
text-align: left;
}
th{
background-color: lightpink;
}
td{
background-color:white;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment