Quick Table Practice

by Jeremy Caudle

I'm trying to get back into my Japanese studies, so I thought I'd make a quick Katakana table. I haven't built a table in a while and it is always something I need to get better and faster at doing. I normally use VS Code on my PC, so table building is a bit faster with Emmet shortcuts, but today I built this bit of code in Coda/Code Editor for iOS.

カタカナ (Katakana)

a i u e o
ka ki ku ke ko
sa shi su se so

View the code:

<div class="codedoodle-block">
		<h1>カタカナ (Katakana)</h1>
				<td class="last">オ<sub>o</sub></td>
				<td class="last">コ<sub>ko</sub></td>
				<td class="last">ソ<sub>so</sub></td>
.codedoodle-block {
		max-width: 80%;
	.codedoodle-block table {
		max-width: 90%;
		margin: 1rem auto;
		padding: .25rem;
		border: solid 4px black;
	.codedoodle-block table td {
		font-weight: bold;
		font-size: 1.5rem;
		padding: 0 1em 0 0;

	.codedoodle-block table tr td:first-of-type {
		padding-left: .25em;
	.codedoodle-block table tr td:last-of-type {
		padding-right: .25em;
	.codedoodle-block td sub {
		font-weight: normal;
		font-family: sans-serif;
		font-size: .75rem;
		color: #9a9a9a;
	.codedoodle-block h1 {
		font-size: 1.5rem;
		font-weight: bold;
		margin: 0 auto;
		text-align: center;