<table>
	<thead>
		<tr>
			<th>Yarn weight</th>
			<th>Types of yarn</th>
			<th>Gauge</th>
			<th>Hook size</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>0: lace</td>
			<td>10 count fingering</td>
			<td>32 - 42 dc</td>
			<td>1.5mm</td>
		</tr>
		<tr>
			<td>1: super fine</td>
			<td>Sock, fingering, baby</td>
			<td>21 - 32 sc</td>
			<td>2.25mm - 3.5mm</td>
		</tr>
		<tr>
			<td>2: fine</td>
			<td>Sport, baby</td>
			<td>16 - 20 sc</td>
			<td>3.5mm - 4.5mm</td>
		</tr>
		<tr>			
			<td>3: light</td>
			<td>DK, light worsted</td>
			<td>12 - 17 sc</td>
			<td>4.5mm - 5.5mm</td>
		</tr>
		<tr>			
			<td>4: medium</td>
			<td>Worsted, afghan, aran</td>
			<td>11 - 14 sc</td>
			<td>5.5mm - 6.5mm</td>
		</tr>
		<tr>
			<td>5: bulky</td>
			<td>Chunky, craft, rug</td>
			<td>8 - 11 sc</td>
			<td>6.5mm - 9mm</td>
		</tr>
		<tr>
			<td>6: super bulky</td>
			<td>Bulky, roving</td>
			<td>5 - 9 sc</td>
			<td>9mm +</td>
		</tr>
	</tbody>
</table>
body {background:hsla(0,0%,95%,1);
	font-family:'helvetica neue','helvetica','arial',sans-serif;
	font-size:1em; color:hsla(0,0%,10%,1);
	text-shadow:0.1em 0.1em hsla(0,0%,100%,1), 0 0 0.13em hsla(0,0%,0%,0.4);
	}
table {border-spacing:0px 0.8em;}
th {padding:0px;}
td {background:hsla(0,0%,86%,1) linear-gradient(top,hsla(0,0%,86%,1),hsla(0,0%,92%,1));
	box-shadow:0 0 1px 1px hsla(0,0%,50%,0.8), 0 0 3px 1px hsla(0,0%,70%,0.2), inset -1px 1px 1px 1px hsla(0,0%,100%,0.8);
	padding:10px 20px;
	}
tr td:first-child {border-radius:3px 0px 0px 30px;}
tr td:last-child {border-radius:0px 30px 3px 0px;}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.