Skip to content

Instantly share code, notes, and snippets.

@hussienliban
Created April 2, 2012 19:36
Show Gist options
  • Save hussienliban/2286609 to your computer and use it in GitHub Desktop.
Save hussienliban/2286609 to your computer and use it in GitHub Desktop.
Table example
/**
* Table example
hsla(0,0%,98%,1)
hsla(0,0%,90%,1)
hsla(0,0%,70%,1)
hsla(0,0%,50%,1)
hsla(0,0%,30%,1)
hsla(0,0%,10%,1)
*/
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; padding-right:}
<!-- content to be placed inside <body>…</body> -->
<body>
<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>
{"view":"split","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment