roskem/_cheatSheet.md

## _cheatSheet.md

      
    Raw
  

              _cheatSheet.md
            
          
    Cheat sheet in form of a table, containing relevant information about HTML tags and attributes.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Cheat Sheet</title>
    <meta name="author" value="Marko Rosic">
    <meta name="keywords" value="HTML, CSS, tags, elements, cheat sheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <!--Document Title-->
        <h1>HTML Table Reference</h1>
    </header>
    <main>
        <!--Table Tags-->
        <div id="tags">
            <h2>Table Tags</h2>
            <table>
                <!--Table Head for table tags-->
                <thead>
                    <tr>
                        <th>Tag</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="code">&lt;table&gt;</span></td>
                        <td>Table</td>
                        <td>The wrapper element for all HTML tables.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;thead&gt;</span></td>
                        <td>Table Head</td>
                        <td>The set of rows defining the column headers in a table.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;tbody&gt;</span></td>
                        <td>Table Body</td>
                        <td>The set of rows containing actual table data.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;tr&gt;</span></td>
                        <td>Table Row</td>
                        <td>The table row container.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;td&gt;</span></td>
                        <td>Table Data</td>
                        <td>The table row container.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;tfoot&gt;</span></td>
                        <td>Table Footer</td>
                        <td>The set of rows defining the footer in a table.</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!--Table Attributes-->
        <div id="attributes">
            <h2>Table Attributes</h2>
            <table>
                <!--Table Head for attributes-->
                <thead>
                    <tr>
                        <th>Attribute</th>
                        <th>Name</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><span class="code">&lt;colspan&gt;</span></td>
                        <td>Column Span</td>
                        <td>Defines how many columns a td element should span.</td>
                    </tr>
                    <tr>
                        <td><span class="code">&lt;rowspan&gt;</span></td>
                        <td>Row Span</td>
                        <td>Defines how many rows a td element should span.</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>

## style.css
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@100;200&family=Roboto:wght@400;700&family=Space+Mono&display=swap');

body {
    background-color: gainsboro;
}

header {
    font-family: 'Roboto';
    font-weight: bold;
    text-align: center;
    font-size: 2em;
}

h2 {
    font-family: 'Roboto';
    font-size: 2em;
    text-align: center;
}

/*Table CSS */

table {
    border: 2px solid black;
    width: 650px;
    margin: 20px auto;
}

thead th {
    background-color: royalblue;
    color: black;
    font-family: 'Roboto';
    font-size: 1em;
    padding: 6px 0;
}

td {
    border-top: 1px solid black;
    font-family: 'Roboto';
    font-size: 14px;
}

.code {
    font-family: monospace;
    font-size: 12px;
    background-color: beige;
    padding: 0;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML Cheat Sheet</title>
	<meta name="author" value="Marko Rosic">
	<meta name="keywords" value="HTML, CSS, tags, elements, cheat sheet">
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<header>
	<!--Document Title-->
	<h1>HTML Table Reference</h1>
	</header>
	<main>
	<!--Table Tags-->
	<div id="tags">
	<h2>Table Tags</h2>
	<table>
	<!--Table Head for table tags-->
	<thead>
	<tr>
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="code"><table></span></td>
	<td>Table</td>
	<td>The wrapper element for all HTML tables.</td>
	</tr>
	<tr>
	<td><span class="code"><thead></span></td>
	<td>Table Head</td>
	<td>The set of rows defining the column headers in a table.</td>
	</tr>
	<tr>
	<td><span class="code"><tbody></span></td>
	<td>Table Body</td>
	<td>The set of rows containing actual table data.</td>
	</tr>
	<tr>
	<td><span class="code"><tr></span></td>
	<td>Table Row</td>
	<td>The table row container.</td>
	</tr>
	<tr>
	<td><span class="code"><td></span></td>
	<td>Table Data</td>
	<td>The table row container.</td>
	</tr>
	<tr>
	<td><span class="code"><tfoot></span></td>
	<td>Table Footer</td>
	<td>The set of rows defining the footer in a table.</td>
	</tr>
	</tbody>
	</table>
	</div>
	<!--Table Attributes-->
	<div id="attributes">
	<h2>Table Attributes</h2>
	<table>
	<!--Table Head for attributes-->
	<thead>
	<tr>
	<th>Attribute</th>
	<th>Name</th>
	<th>Description</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><span class="code"><colspan></span></td>
	<td>Column Span</td>
	<td>Defines how many columns a td element should span.</td>
	</tr>
	<tr>
	<td><span class="code"><rowspan></span></td>
	<td>Row Span</td>
	<td>Defines how many rows a td element should span.</td>
	</tr>
	</tbody>
	</table>
	</div>
	</main>
	</body>
	</html>
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@100;200&family=Roboto:wght@400;700&family=Space+Mono&display=swap');

	body {
	background-color: gainsboro;
	}

	header {
	font-family: 'Roboto';
	font-weight: bold;
	text-align: center;
	font-size: 2em;
	}

	h2 {
	font-family: 'Roboto';
	font-size: 2em;
	text-align: center;
	}

	/Table CSS /

	table {
	border: 2px solid black;
	width: 650px;
	margin: 20px auto;
	}

	thead th {
	background-color: royalblue;
	color: black;
	font-family: 'Roboto';
	font-size: 1em;
	padding: 6px 0;
	}

	td {
	border-top: 1px solid black;
	font-family: 'Roboto';
	font-size: 14px;
	}

	.code {
	font-family: monospace;
	font-size: 12px;
	background-color: beige;
	padding: 0;
	}