Semantic Table + Styling + Charting

dabblet.css

/*
* Semantic Table + Styling + Charting
*/

@import url(http://fonts.googleapis.com/css?family=Share);
body {
	margin: 10px;
}

#stylised {
	display: none;
}

* { transition: all 0.5s ease;}

label {
	text-align: center;
	min-width: 100px;
	margin: 10px;
	marign-left: auto;
	marign-right: auto;
	padding: 5px 20px;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, .8);
	line-height: 33px;
	font-size: 19px;
	background: linear-gradient(top, #fff 1%, #eaeaea 100%);
	box-shadow: 0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1);
}

label:hover {
	background: #fff;
}

label.whenChecked {
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0 1px 1px rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(155, 155, 155, .3), 0 2px 2px rgba(0, 0, 0, .1);
}

#stylised:not(:checked) ~ .whenChecked {
	display: none;
}

#stylised:not(:checked) ~ .notChecked {
	display: block;
}

#stylised:not(:checked) ~ table {
	width: 100%;
	table-layout: fixed;
	border: 1px solid #000;
	font-family: Share, cursive;
}

#stylised:not(:checked) ~ table caption {
	text-align: center;
	font-size: 1.5em;
	padding: 10px;
}

#stylised:not(:checked) ~ table .sl {
	color: #00f;
}

#stylised:not(:checked) ~ table thead th {
	border-bottom: 1px solid #000;
}

#stylised:not(:checked) ~ table thead th:nth-child(2n+1):not(:first-child) {
	background: linear-gradient(top, rgba(50, 100, 200, .2) 0%, rgba(50, 100, 200, .3) 100%);
}

#stylised:not(:checked) ~ table thead th:first-child {
	border-right: 1px solid #000;
}

#stylised:not(:checked) ~ table tfoot td {
	text-align: center;
	border-top: 1px solid #000;
}

#stylised:not(:checked) ~ table tfoot td:first-child {
	border-right: 1px solid #000;
}

#stylised:not(:checked) ~ table tbody tr:nth-child(2n+1) {
	background: linear-gradient(top, rgba(50, 200, 25, .2) 0%, rgba(50, 200, 25, .3) 100%);
}

#stylised:not(:checked) ~ table tbody tr:hover {
	background: linear-gradient(top, rgba(50, 100, 200, .2) 0%, rgba(50, 100, 200, .3) 100%);
}

#stylised:not(:checked) ~ table tbody td:nth-child(2n+1) {
	background: linear-gradient(top, rgba(50, 100, 200, .2) 0%, rgba(50, 100, 200, .3) 100%);
}

#stylised:not(:checked) ~ table tbody th {
	border-right: 1px solid #000;
}

#stylised:not(:checked) ~ table td,#stylised:not(:checked) ~ table th {
	box-shadow: 0 0 0 1px rgba(155, 155, 155, .3), 1px 0 0 0 rgba(255, 255, 255, .9) inset, 0 2px 2px rgba(0, 0, 0, .1);
	padding: 1px;
}

#stylised:not(:checked) ~ table td.winner,#stylised:not(:checked) ~ table th.winner {
	color: red;
}

#stylised:checked ~ .whenChecked {
	display: block;
}

#stylised:checked ~ .notChecked {
	display: none;
}

#stylised:checked ~ table,#stylised:checked ~ table caption,#stylised:checked ~ table tbody,#stylised:checked ~ table td,#stylised:checked ~ table tfoot,#stylised:checked ~ table th,#stylised:checked ~ table thead,#stylised:checked ~ table tr {
	display: inline-block;
}

#stylised:checked ~ table tfoot{
	display:none;
}

#stylised:checked ~ table tbody {
	position: relative;
	height: 300px;
}

#stylised:checked ~ table thead,
#stylised:checked ~ table tbody {
	display:block;
	width: 100%;
	min-width: 800px;
}

#stylised:checked ~ table thead tr {
	width: 100%;
}

#stylised:checked ~ table thead th, 
#stylised:checked ~ table tbody th, 
#stylised:checked ~ table tbody td 
{
	width: 15%;
}


#stylised:checked ~ table tbody tr {
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#stylised:checked ~ table tbody tr{
	margin-bottom: 5px;
	padding: 1em 0 0 0;
}

#stylised:checked ~ table tbody tr:hover{
	background-image: linear-gradient(transparent 50%, transparent 50%, rgba(0, 0, 0, 0.2) 50%);
	background-size: 2em 2em;
}

#stylised:checked ~ table tbody tr td {
	display: inline-block;
	vertical-align: bottom;
	text-align: center;
}

#stylised:checked ~ table tbody tr:hover td {
	background: linear-gradient(top, rgba(100, 200, 200, .7) 0%, rgba(50, 100, 200, .9) 100%);
	background-color: rgb(100, 200, 200);
	opacity: 0.9;
	color: rgba(0,0,0,0);
}

#stylised:checked ~ table tbody tr:hover td:hover {
	color: rgba(0,0,0,1);
}

#stylised:checked ~ table tbody tr:hover td {
	height: attr(data-value, em, 1) !important;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="0"],
#stylised:checked ~ table tbody tr:hover td[data-value^="1"]
 {
	height: 1em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="2"] {
	height: 2em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="3"] {
	height: 3em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="4"] {
	height: 4em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="5"] {
	height: 5em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="6"] {
	height: 6em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="7"] {
	height: 7em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="8"] {
	height: 8em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="9"] {
	height: 9em;
}

#stylised:checked ~ table tbody tr:hover td[data-value^="10"] {
	height: 10em;
}

dabblet.html

<form><input type="checkbox" id="stylised"/><label for="stylised" class="whenChecked">show Table</label><label for="stylised" class="notChecked">show Diagram</label>
    <!-- table inspired by http://themaingate.net/dev/html/how-to-make-a-perfect-semantic-html-table -->
    <table summary="This table shows various Charting systems compared, displaying their awesomeness. The table itself is a example of a semantically marked up table that can be displayed as chart.">
    <caption>
      How awesome are charting technologies?
    </caption>
    <thead>
      <tr>
        <th id="itemcolumn" scope="col">Awesomeness Category</th>
        <th id="sl" scope="col">Silverlight</th>
        <th id="fl" scope="col">Flash</th>
        <th id="j" scope="col">Java</th>
        <th id="hcj" scope="col" class="winner">HTML/CSS/JS</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>&nbsp;</td>
        <td colspan="3">The suckz</td>
        <td class="winner">Awesome!</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th id="row1" scope="row">Semantics</th>
        <td headers="itemcolumn sl" data-value="6">6</td>
        <td headers="itemcolumn fl" data-value="2">2</td>
        <td headers="itemcolumn j" data-value="1">1</td>
        <td headers="itemcolumn hcj" data-value="10">10</td>
      </tr>
      <tr>
        <th id="row2" scope="row">Code</th>
        <td headers="itemcolumn sl" data-value="5">5</td>
        <td headers="itemcolumn fl" data-value="5">5</td>
        <td headers="itemcolumn j" data-value="4">4</td>
        <td headers="itemcolumn hcj" data-value="8">8</td>
      </tr>
      <tr>
        <th id="row3" scope="row">Acessibility</th>
        <td headers="itemcolumn sl" data-value="3">3</td>
        <td headers="itemcolumn fl" data-value="1.5">1</td>
        <td headers="itemcolumn j" data-value="2">2</td>
        <td headers="itemcolumn hcj" data-value="10">10</td>
      </tr>
      <tr>
        <th id="row4" scope="row">Cross-Platformness</th>
        <td headers="itemcolumn sl" data-value="6">6</td>
        <td headers="itemcolumn fl" data-value="2">2</td>
        <td headers="itemcolumn j" data-value="3">3</td>
        <td headers="itemcolumn hcj" data-value="10">10</td>
      </tr>
      <tr>
        <th id="row5" scope="row">Backwards-Compatibility</th>
        <td headers="itemcolumn sl" data-value="6">6</td>
        <td headers="itemcolumn fl" data-value="3">3</td>
        <td headers="itemcolumn j" data-value="5">5</td>
        <td headers="itemcolumn hcj" data-value="10">10</td>
      </tr>
      <tr>
        <th id="row6" scope="row">Future-Proof</th>
        <td headers="itemcolumn sl" data-value="5">5</td>
        <td headers="itemcolumn fl" data-value="5">5</td>
        <td headers="itemcolumn j" data-value="2">2</td>
        <td headers="itemcolumn hcj" data-value="10">10</td>
      </tr>
      <tr>
        <th id="row7" scope="row">Plugins that can be ignored</th>
        <td headers="itemcolumn sl" data-value="2">2</td>
        <td headers="itemcolumn fl" data-value="2">2</td>
        <td headers="itemcolumn j" data-value="2">2</td>
        <td headers="itemcolumn hcj" data-value="3">3</td>
      </tr>
    </tbody>
  </table>
</form>​

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"html"}