prof3ssorSt3v3/tables.html

## tables.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML Tables</title>
    <style>
        html{
            font-size: 20px;
            line-height: 1.5;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            font-weight: 100;
        }
        table{
            border-collapse:collapse;
            caption-side: bottom;
            border:1px solid red;
        }
        caption{
            color: cornflowerblue;
            font-weight: 400;
        }
        thead{ }
        tbody{ }
        thead tr{ }
        tbody tr{ }
        thead th:nth-of-type(1n+2){
            vertical-align: top;
            text-align: center;
            border-left: 1px solid #aaa;
        }

        thead th span{
            text-orientation: upright;
            writing-mode: vertical-rl;
            /* horizontal-tb */
        }
        tbody th{ }
        tr{
            border-bottom: 1px solid green;
        }
        th{
            padding: 0.5rem 0.5rem;
        }
        td{
            padding: 0.5rem 0.5rem;
        }
        thead :empty{
            background-color:#fc3;
        }

        /* highlighting columns and rows */
        tbody tr:hover {
          background-color: #ffa;
        }
        thead tr{
            background-color: #fff;
        }
        tbody td, tbody th {
          position: relative;
        }
        tbody td:hover::after,
        tbody th:hover::after {
          content: "";
          position: absolute;
          background-color: cornflowerblue;
          left: 0;
          top: -5000px;
          height: 10000px;
          width: 100%;
          z-index: -1;
        }
        caption{
            background-color: #fff;
        }
        table{
            overflow: hidden;
        }
    </style>
</head>
<body>
    <table>
        <caption>Meal Plan</caption>
        <colgroup>
            <col />
            <col />
            <col span="5"/>
            <col />
        </colgroup>
        <thead>
            <tr>
                <th></th>
                <th><span>Sunday</span></th>
                <th><span>Monday</span></th>
                <th><span>Tuesday</span></th>
                <th><span>Wednesday</span></th>
                <th><span>Thursday</span></th>
                <th><span>Friday</span></th>
                <th><span>Saturday</span></th>
            </tr>
        </thead>
<!--        <tfoot></tfoot>-->
        <tbody>
            <tr>
                <th>Breakfast</th>
                <td>Pizza</td>
                <td rowspan="3">Pizza</td>
                <td>Pizza</td>
                <td>Pizza</td>
                <td>Pizza</td>
                <td>Pizza</td>
                <td>Pizza</td>
            </tr>
            <tr>
                <th>Lunch</th>
                <td>Salad</td>
<!--                <td>Burger</td>-->
                <td>Sub</td>
                <td colspan="2">Kraft dinner</td>
<!--                <td>Salad</td>-->
                <td>Beer</td>
                <td>Sandwich</td>
            </tr>
            <tr>
                <th>Dinner</th>
                <td>Chicken Parmesan</td>
<!--                <td>Pizza</td>-->
                <td>Spaghetti</td>
                <td>Baked Salmon</td>
                <td>Roast Beef</td>
                <td>Kale and Quinoa</td>
                <td>BBQ Chicken</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>HTML Tables</title>
	<style>
	html{
	font-size: 20px;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 100;
	}
	table{
	border-collapse:collapse;
	caption-side: bottom;
	border:1px solid red;
	}
	caption{
	color: cornflowerblue;
	font-weight: 400;
	}
	thead{ }
	tbody{ }
	thead tr{ }
	tbody tr{ }
	thead th:nth-of-type(1n+2){
	vertical-align: top;
	text-align: center;
	border-left: 1px solid #aaa;
	}

	thead th span{
	text-orientation: upright;
	writing-mode: vertical-rl;
	/* horizontal-tb */
	}
	tbody th{ }
	tr{
	border-bottom: 1px solid green;
	}
	th{
	padding: 0.5rem 0.5rem;
	}
	td{
	padding: 0.5rem 0.5rem;
	}
	thead :empty{
	background-color:#fc3;
	}

	/* highlighting columns and rows */
	tbody tr:hover {
	background-color: #ffa;
	}
	thead tr{
	background-color: #fff;
	}
	tbody td, tbody th {
	position: relative;
	}
	tbody td:hover::after,
	tbody th:hover::after {
	content: "";
	position: absolute;
	background-color: cornflowerblue;
	left: 0;
	top: -5000px;
	height: 10000px;
	width: 100%;
	z-index: -1;
	}
	caption{
	background-color: #fff;
	}
	table{
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<table>
	<caption>Meal Plan</caption>
	<colgroup>
	<col />
	<col />
	<col span="5"/>
	<col />
	</colgroup>
	<thead>
	<tr>
	<th></th>
	<th><span>Sunday</span></th>
	<th><span>Monday</span></th>
	<th><span>Tuesday</span></th>
	<th><span>Wednesday</span></th>
	<th><span>Thursday</span></th>
	<th><span>Friday</span></th>
	<th><span>Saturday</span></th>
	</tr>
	</thead>
	<!-- <tfoot></tfoot>-->
	<tbody>
	<tr>
	<th>Breakfast</th>
	<td>Pizza</td>
	<td rowspan="3">Pizza</td>
	<td>Pizza</td>
	<td>Pizza</td>
	<td>Pizza</td>
	<td>Pizza</td>
	<td>Pizza</td>
	</tr>
	<tr>
	<th>Lunch</th>
	<td>Salad</td>
	<!-- <td>Burger</td>-->
	<td>Sub</td>
	<td colspan="2">Kraft dinner</td>
	<!-- <td>Salad</td>-->
	<td>Beer</td>
	<td>Sandwich</td>
	</tr>
	<tr>
	<th>Dinner</th>
	<td>Chicken Parmesan</td>
	<!-- <td>Pizza</td>-->
	<td>Spaghetti</td>
	<td>Baked Salmon</td>
	<td>Roast Beef</td>
	<td>Kale and Quinoa</td>
	<td>BBQ Chicken</td>
	</tr>
	</tbody>
	</table>
	</body>
	</html>