Quick Table Practice


by Jeremy Caudle
notes

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:

HTML and JS 
<div class="codedoodle-block">
		<h1>カタカナ (Katakana)</h1>
		<table>
			<tr>
				<td>ア<sub>a</sub></td>
				<td>イ<sub>i</sub></td>
				<td>ウ<sub>u</sub></td>
				<td>エ<sub>e</sub></td>
				<td class="last">オ<sub>o</sub></td>
			</tr>
			<tr>
				<td>カ<sub>ka</sub></td>
				<td>キ<sub>ki</sub></td>
				<td>ク<sub>ku</sub></td>
				<td>ケ<sub>ke</sub></td>
				<td class="last">コ<sub>ko</sub></td>
			</tr>
			<tr>
				<td>サ<sub>sa</sub></td>
				<td>シ<sub>shi</sub></td>
				<td>ス<sub>su</sub></td>
				<td>セ<sub>se</sub></td>
				<td class="last">ソ<sub>so</sub></td>
			</tr>
		</table>
				</div>
CSS 
.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;
	}

Tags