tables

index.html

<section>
	<header>
		<h1>Hi<wbr>ra<wbr>ga<wbr>na</h1>
		<h2>some japanese chars</h2>
	</header>
	<div class="table-wrapper">
		<table>
			<tr>
				<th></th>
				<th>a</th>
				<th>e</th>
				<th>u</th>
				<th>e</th>
				<th>o</th>

			</tr>
			<tr>
				<th>×</th>
				<td>あ</td>
				<td>い</td>
				<td>う</td>
				<td>え</td>
				<td>お</td>
			</tr>
			<tr>
				<th>k</th>
				<td>か</td>
				<td>き</td>
				<td>く</td>
				<td>け</td>
				<td>こ</td>
			</tr>
			<tr>
				<th>s</th>
				<td>さ</td>
				<td>し</td>
				<td>す</td>
				<td>せ</td>
				<td>そ</td>
			</tr>
			<tr>
				<th>t</th>
				<td>た</td>
				<td>ち</td>
				<td>つ</td>
				<td>て</td>
				<td>と</td>
			</tr>
			<tr>
				<th>n</th>
				<td>な</td>
				<td>に</td>
				<td>ぬ</td>
				<td>ね</td>
				<td>の</td>
			</tr>
			<tr>
				<th>h</th>
				<td>は</td>
				<td>ひ</td>
				<td>ふ</td>
				<td>へ</td>
				<td>ほ</td>
			</tr>
			<tr>
				<th>m</th>
				<td>ま</td>
				<td>み</td>
				<td>む</td>
				<td>め</td>
				<td>も</td>
			</tr>
			<tr>
				<th>y</th>
				<td>や</td>
				<td></td>
				<td>ゆ</td>
				<td></td>
				<td>よ</td>
			</tr>
			<tr>
				<th>r</th>
				<td>ら</td>
				<td>り</td>
				<td>る</td>
				<td>れ</td>
				<td>ろ</td>
			</tr>
			<tr>
				<th>w</th>
				<td>わ</td>
				<td></td>
				<td></td>
				<td></td>
				<td>を</td>
			</tr>
			<tr>
				<th></th>
				<td>ん</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<table>
			<tr>
				<th></th>
				<th>a</th>
				<th>e</th>
				<th>u</th>
				<th>e</th>
				<th>o</th>

			</tr>
			<tr>
				<th>×</th>
				<td>あ</td>
				<td>い</td>
				<td>う</td>
				<td>え</td>
				<td>お</td>
			</tr>
			<tr>
				<th>k</th>
				<td>か</td>
				<td>き</td>
				<td>く</td>
				<td>け</td>
				<td>こ</td>
			</tr>
			<tr>
				<th>s</th>
				<td>さ</td>
				<td>し</td>
				<td>す</td>
				<td>せ</td>
				<td>そ</td>
			</tr>
			<tr>
				<th>t</th>
				<td>た</td>
				<td>ち</td>
				<td>つ</td>
				<td>て</td>
				<td>と</td>
			</tr>
			<tr>
				<th>n</th>
				<td>な</td>
				<td>に</td>
				<td>ぬ</td>
				<td>ね</td>
				<td>の</td>
			</tr>
			<tr>
				<th>h</th>
				<td>は</td>
				<td>ひ</td>
				<td>ふ</td>
				<td>へ</td>
				<td>ほ</td>
			</tr>
			<tr>
				<th>m</th>
				<td>ま</td>
				<td>み</td>
				<td>む</td>
				<td>め</td>
				<td>も</td>
			</tr>
			<tr>
				<th>y</th>
				<td>や</td>
				<td></td>
				<td>ゆ</td>
				<td></td>
				<td>よ</td>
			</tr>
			<tr>
				<th>r</th>
				<td>ら</td>
				<td>り</td>
				<td>る</td>
				<td>れ</td>
				<td>ろ</td>
			</tr>
			<tr>
				<th>w</th>
				<td>わ</td>
				<td></td>
				<td></td>
				<td></td>
				<td>を</td>
			</tr>
			<tr>
				<th></th>
				<td>ん</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<table>
			<tr>
				<th></th>
				<th>a</th>
				<th>e</th>
				<th>u</th>
				<th>e</th>
				<th>o</th>

			</tr>
			<tr>
				<th>×</th>
				<td>あ</td>
				<td>い</td>
				<td>う</td>
				<td>え</td>
				<td>お</td>
			</tr>
			<tr>
				<th>k</th>
				<td>か</td>
				<td>き</td>
				<td>く</td>
				<td>け</td>
				<td>こ</td>
			</tr>
			<tr>
				<th>s</th>
				<td>さ</td>
				<td>し</td>
				<td>す</td>
				<td>せ</td>
				<td>そ</td>
			</tr>
			<tr>
				<th>t</th>
				<td>た</td>
				<td>ち</td>
				<td>つ</td>
				<td>て</td>
				<td>と</td>
			</tr>
			<tr>
				<th>n</th>
				<td>な</td>
				<td>に</td>
				<td>ぬ</td>
				<td>ね</td>
				<td>の</td>
			</tr>
			<tr>
				<th>h</th>
				<td>は</td>
				<td>ひ</td>
				<td>ふ</td>
				<td>へ</td>
				<td>ほ</td>
			</tr>
			<tr>
				<th>m</th>
				<td>ま</td>
				<td>み</td>
				<td>む</td>
				<td>め</td>
				<td>も</td>
			</tr>
			<tr>
				<th>y</th>
				<td>や</td>
				<td></td>
				<td>ゆ</td>
				<td></td>
				<td>よ</td>
			</tr>
			<tr>
				<th>r</th>
				<td>ら</td>
				<td>り</td>
				<td>る</td>
				<td>れ</td>
				<td>ろ</td>
			</tr>
			<tr>
				<th>w</th>
				<td>わ</td>
				<td></td>
				<td></td>
				<td></td>
				<td>を</td>
			</tr>
			<tr>
				<th></th>
				<td>ん</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table>
		<footer>
			<img src="https://via.placeholder.com/300" alt="">
		</footer>
	</div>
</section>

style.css

* {
	/* 	outline: 1px solid red; */
	margin: 0;
}
img {
	max-width: 100%;
	height: auto;
}
:root {
	font-family: sans-serif;
}
section {
	background-color: #f8b625;
	padding: 1rem;
	max-width: max-content;
	margin: 0 auto;
}
header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
}
h1 {
	font-size: clamp(1.5rem, 15vw, 4rem);
	text-transform: uppercase;
	color: #ffffff;
}
h2 {
	font-size: clamp(1.15rem, 7vw, 1.5rem);
	color: #ffffff;
}
.table-wrapper {
	overflow-x: auto;
	display: grid;
	grid-row-gap: 1rem;
	background-color: #e9eaea;
}
table {
	border-spacing: 0.5rem;
}
th,
td {
	text-align: center;
	vertical-align: middle;
	font-weight: 600;
}
tr:first-child th {
	padding: 0.15rem 0.5rem;
}
tr th:first-child {
	font-size: clamp(0.5rem, 5vw, 1rem);
	padding: 0 0.5em;
}
td {
	background-color: #ffffff;
	font-size: clamp(0.5rem, 5vw, 1.5rem);
	padding: 0 0.5em;
}
footer {
	place-self: center;
}
@media (min-width: 768px) {
	.table-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}