Skip to content

Instantly share code, notes, and snippets.

@DJuliny

DJuliny/index.html

Last active April 25, 2024 20:15
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 17 You must be signed in to fork a gist
  • Save DJuliny/ef3508c759771822f21b04ad5fac49a4 to your computer and use it in GitHub Desktop.
Save DJuliny/ef3508c759771822f21b04ad5fac49a4 to your computer and use it in GitHub Desktop.
Download ZIP
My Cheat Sheet: Table Reference
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Cheat Sheet: HTML Table Reference</title>
<link href="./styles.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h1>HMTL Table Reference</h1>
<nav>
<ul>
<li><a href="#tags">Table tags</a></li>
<li><a href="#attributes">Table attributes</a></li>
</ul>
</nav>
</header>
<main>
<div id="tags">
<h2>Table tags</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code">&lt;table&gt;</td>
<td>Table</td>
<td>The wrapper element for all HTML tables</td>
</tr>
<tr>
<td class="code">&lt;thead&gt;</td>
<td>Table Head</td>
<td>The set of rows defining the column headers in a table</td>
</tr>
<tr>
<td class="code">&lt;tbody&gt;</td>
<td>Table Body</td>
<td>The set of rows containing actual table data</td>
</tr>
<tr>
<td class="code">&lt;tr&gt;</td>
<td>Table Row</td>
<td>The table row container</td>
</tr>
<tr>
<td class="code">&lt;td&gt;</td>
<td>Table Data</td>
<td>The table row container</td>
</tr>
<tr>
<td class="code">&lt;tfoot&gt;</td>
<td>Table Foot</td>
<td>The set of rows defining the footer in a table</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<hr>
<div id="attributes">
<h2>Table attributes</h2>
<table>
<thead>
<tr>
<th>Attribute</th>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="code">colspan</td>
<td>Column Span</td>
<td>Defines how many columns a td element should span</td>
</tr>
<tr>
<td class="code">rowspan</td>
<td>Row Span</td>
<td>Defines how many rows a &lt;td&gt; element should span</td>
</tr>
</tbody>
</table>
</div>
</main>
<br>
<footer>
<h5> Made by Julia S.</h5>
</footer>
</body>
</html>
Raw
styles.css
table {margin: 0 auto; border-collapse: collapse; width: 50%;}
table, th, td {border: 1px solid black;}
th {height: 50px; text-align: left; background-color: DarkSalmon; color: white; text-transform: uppercase; font-family: Helvetica; font-size: 14px;}
th, td {padding: 15px; text-align: left;}
tr:nth-child(even) {background-color: MistyRose;}
a, li {color: DarkSalmon; font-weight: bold;}
.code {font-family: Courier, Monaco, monospace; font-size: 13px;}
html, body {width: 100%; text-align: center; background-color: FloralWhite;}
nav {text-align: left !important}
h1, h2, ul {color: FireBrick; font-family: Helvetica;}
@lythro10
Copy link

Nice !!!

Have a look at my https://github.com/lythro10/CodeCademy-createYourOwnCheatSheet

@Deveta-creator
Copy link

that is very nice and helpful. In how much time will I be able to learn to build like this any suggestion. I am learning since 4 days.

@EDAHBENSON20
Copy link

Hmmm!
This is cool!
Have a look at my attempt https://github.com/EDAHBENSON20/webdev-champ.git

@hawvinsinho
Copy link

That's a very good one

@Gentlestan
Copy link

Nice work! you doing very well

here is a link to my cheat sheet
https://github.com/Gentlestan/cheat-sheet.git

@amcollie
Copy link

amcollie commented Mar 2, 2022

here is my cheat sheet: https://gist.github.com/88aa7992f68326365db3a537fa060a1f

@KhurshedBoev
Copy link

Looks good!

@ArtemBabych
Copy link

GJ))

@MandyonGit
Copy link

This was helpful, thanks.

@CharlotteChiraghuddin
Copy link

Here is mine :)
https://gist.github.com/codecademydev/562e71d16355ee70b4cd4daad88bd9f5

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment