Urkuya/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Personal Project: HTML table references</title>
  <link href="./styles.css" type="text/css" rel="stylesheet"
</head>

<body>
    <header>
        <h1 class="title">HTML table references</h1>
        <nav>
            <h2 class="tags">Table Tags</h2>
        </nav>
    </header>

    <table class="table">
      <thead class="th">
          <th>Tag</th>
          <th>Name</th>
          <th>Description</th>
       </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;</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">&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 Foot</td>
            <td>The set of rows defining the footer in a table.</td>
        </tr>
      </tbody>
    </table>


    <h2 class="attributes">Table Attributes</h2>

    <table>
        <thead>
        <th>Attribute</th>
        <th>Name</th>
        <th>Description</th>
    </thead>

    <tbody>
      <tr>
          <td><span class="code">&lt;colspan&gt;</span></td>
          <td>Column Span</td>
          <td>Defnines 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>
</body>

      <tfoot>
        <h4 class="published"><em>Published by Saadat</em></h4>
      </tfoot>

</html>

## style.css
body {
    font-family: Lucida Console, Courier, monospace;
    background-color: gainsboro;
   }

.title {
font-weight: bold;
text-align: center;
font-size: 40px;
font-family: Arial;
   }

.tags {
font-weight: bold;
text-align: center;
font-size: 30px;
font-family: Arial;
color: purple;
}

table {margin: 0 auto; border-collapse: collapse ; width: 90%;}
table, th {border: 2px solid purple;}
td {border: 0.5px solid;}

th {
  background-color: pink;
  text-align: left;
  color: black;
  text-transform: uppercase;
}

.code {
  font-family: Courier, Monaco, monospace;
  font-size: 15px;
  background-color: lightgoldenrodyellow;
}

.attributes {
font-weight: bold;
text-align: center;
font-size: 30px;
font-family: Arial;
color: purple;
}

.published {
  color: purple;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Personal Project: HTML table references</title>
	<link href="./styles.css" type="text/css" rel="stylesheet"
	</head>

	<body>
	<header>
	<h1 class="title">HTML table references</h1>
	<nav>
	<h2 class="tags">Table Tags</h2>
	</nav>
	</header>

	<table class="table">
	<thead class="th">
	<th>Tag</th>
	<th>Name</th>
	<th>Description</th>
	</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></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 Foot</td>
	<td>The set of rows defining the footer in a table.</td>
	</tr>
	</tbody>
	</table>


	<h2 class="attributes">Table Attributes</h2>

	<table>
	<thead>
	<th>Attribute</th>
	<th>Name</th>
	<th>Description</th>
	</thead>

	<tbody>
	<tr>
	<td><span class="code"><colspan></span></td>
	<td>Column Span</td>
	<td>Defnines 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>
	</body>

	<tfoot>
	<h4 class="published"><em>Published by Saadat</em></h4>
	</tfoot>

	</html>
	body {
	font-family: Lucida Console, Courier, monospace;
	background-color: gainsboro;
	}

	.title {
	font-weight: bold;
	text-align: center;
	font-size: 40px;
	font-family: Arial;
	}

	.tags {
	font-weight: bold;
	text-align: center;
	font-size: 30px;
	font-family: Arial;
	color: purple;
	}

	table {margin: 0 auto; border-collapse: collapse ; width: 90%;}
	table, th {border: 2px solid purple;}
	td {border: 0.5px solid;}

	th {
	background-color: pink;
	text-align: left;
	color: black;
	text-transform: uppercase;
	}

	.code {
	font-family: Courier, Monaco, monospace;
	font-size: 15px;
	background-color: lightgoldenrodyellow;
	}

	.attributes {
	font-weight: bold;
	text-align: center;
	font-size: 30px;
	font-family: Arial;
	color: purple;
	}

	.published {
	color: purple;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	}