Skip to content

Commit

Permalink
adding advanced html table examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdavidmills
chrisdavidmills committed Jan 31, 2017
1 parent 3971b29 commit 51f303a
Show file tree
Hide file tree
Showing 9 changed files with 547 additions and 4 deletions.
80 changes: 80 additions & 0 deletions html/tables/advanced/items-sold-headers.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Items sold summary</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Items sold summary</h1>

<table>
<caption>Items Sold August 2016</caption>
<thead>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th colspan="3" id="clothes">Clothes</th>
<th colspan="2" id="accessories">Accessories</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th id="trousers">Trousers</th>
<th id="skirts">Skirts</th>
<th id="dresses">Dresses</th>
<th id="bracelets">Bracelets</th>
<th id="rings">Rings</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" id="belgium">Belgium</th>
<th id="antwerp">Antwerp</th>
<td headers="clothes trousers belgium antwerp">56</td>
<td headers="clothes skirts belgium antwerp">22</td>
<td headers="clothes dresses belgium antwerp">43</td>
<td headers="accessories bracelets belgium antwerp">72</td>
<td headers="accessories rings belgium antwerp">23</td>
</tr>
<tr>
<th id="gent">Gent</th>
<td headers="clothes trousers belgium gent">46</td>
<td headers="clothes skirts belgium gent">18</td>
<td headers="clothes dresses belgium gent">50</td>
<td headers="accessories bracelets belgium gent">61</td>
<td headers="accessories rings belgium gent">15</td>
</tr>
<tr>
<th id="brussels">Brussels</th>
<td headers="clothes trousers belgium brussels">51</td>
<td headers="clothes skirts blegium brussels">27</td>
<td headers="clothes dresses belgium brussels">38</td>
<td headers="accessories bracelets belgium brussels">69</td>
<td headers="accessories rings belgium brussels">28</td>
</tr>
<tr>
<th rowspan="2" id="netherlands">The Netherlands</th>
<th id="amsterdam">Amsterdam</th>
<td headers="clothers trousers netherlands amsterdam">89</td>
<td headers="clothes skirts netherlands amsterdam">34</td>
<td headers="clothes dresses netherlands amsterdam">69</td>
<td headers="accessories bracelets netherlands amsterdam">85</td>
<td headers="accessories rings netherlands amsterdam">38</td>
</tr>
<tr>
<th headers="utrecht">Utrecht</th>
<td headers="clothes trousers netherlands utrecht">80</td>
<td headers="clothes skirts netherlands utrecht">12</td>
<td headers="clothes dresses netherlands utrecht">43</td>
<td headers="accessories bracelets netherlands utrecht">36</td>
<td headers="accessories rings netherlands utrecht">19</td>
</tr>
</tbody>
</table>

</body>

</html>
80 changes: 80 additions & 0 deletions html/tables/advanced/items-sold-scope.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Items sold summary</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Items sold summary</h1>

<table>
<caption>Items Sold August 2016</caption>
<thead>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th colspan="3" scope="colgroup">Clothes</th>
<th colspan="2" scope="colgroup">Accessories</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th scope="col">Trousers</th>
<th scope="col">Skirts</th>
<th scope="col">Dresses</th>
<th scope="col">Bracelets</th>
<th scope="col">Rings</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3" scope="rowgroup">Belgium</th>
<th scope="row">Antwerp</th>
<td>56</td>
<td>22</td>
<td>43</td>
<td>72</td>
<td>23</td>
</tr>
<tr>
<th scope="row">Gent</th>
<td>46</td>
<td>18</td>
<td>50</td>
<td>61</td>
<td>15</td>
</tr>
<tr>
<th scope="row">Brussels</th>
<td>51</td>
<td>27</td>
<td>38</td>
<td>69</td>
<td>28</td>
</tr>
<tr>
<th rowspan="2" scope="rowgroup">The Netherlands</th>
<th scope="row">Amsterdam</th>
<td>89</td>
<td>34</td>
<td>69</td>
<td>85</td>
<td>38</td>
</tr>
<tr>
<th scope="row">Utrecht</th>
<td>80</td>
<td>12</td>
<td>43</td>
<td>36</td>
<td>19</td>
</tr>
</tbody>
</table>

</body>

</html>
80 changes: 80 additions & 0 deletions html/tables/advanced/items-sold.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Items sold summary</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Items sold summary</h1>

<table>
<caption>Items Sold August 2016</caption>
<thead>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th colspan="3">Clothes</th>
<th colspan="2">Accessories</th>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<th>Trousers</th>
<th>Skirts</th>
<th>Dresses</th>
<th>Bracelets</th>
<th>Rings</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="3">Belgium</th>
<th>Antwerp</th>
<td>56</td>
<td>22</td>
<td>43</td>
<td>72</td>
<td>23</td>
</tr>
<tr>
<th>Gent</th>
<td>46</td>
<td>18</td>
<td>50</td>
<td>61</td>
<td>15</td>
</tr>
<tr>
<th>Brussels</th>
<td>51</td>
<td>27</td>
<td>38</td>
<td>69</td>
<td>28</td>
</tr>
<tr>
<th rowspan="2">The Netherlands</th>
<th>Amsterdam</th>
<td>89</td>
<td>34</td>
<td>69</td>
<td>85</td>
<td>38</td>
</tr>
<tr>
<th>Utrecht</th>
<td>80</td>
<td>12</td>
<td>43</td>
<td>36</td>
<td>19</td>
</tr>
</tbody>
</table>

</body>

</html>
35 changes: 35 additions & 0 deletions html/tables/advanced/minimal-table.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
html {
font-family: sans-serif;
}

table {
border-collapse: collapse;
border: 2px solid rgb(200,200,200);
letter-spacing: 1px;
font-size: 0.8rem;
}

td, th {
border: 1px solid rgb(190,190,190);
padding: 10px 20px;
}

th {
background-color: rgb(235,235,235);
}

td {
text-align: center;
}

tr:nth-child(even) td {
background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
background-color: rgb(245,245,245);
}

caption {
padding: 10px;
}
41 changes: 41 additions & 0 deletions html/tables/advanced/nested-tables.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Nested tables</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>Nested tables</h1>

<table id="table1">
<tr>
<th>title1</th>
<th>title2</th>
<th>title3</th>
</tr>
<tr>
<td id="nested">
<table id="table2">
<tr>
<td>cell1</td>
<td>cell2</td>
<td>cell3</td>
</tr>
</table>
</td>
<td>cell2</td>
<td>cell3</td>
</tr>
<tr>
<td>cell4</td>
<td>cell5</td>
<td>cell6</td>
</tr>
</table>

</body>

</html>
71 changes: 71 additions & 0 deletions html/tables/advanced/spending-record-finished.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My spending record</title>
<link href="minimal-table.css" rel="stylesheet" type="text/css">
<style>
tbody {
font-size: 90%;
font-style: italic;
}

tfoot {
font-weight: bold;
}
</style>
</head>
<body>
<h1>My spending record</h1>

<table>
<caption>How I chose to spend my money</caption>
<thead>
<tr>
<th>Purchase</th>
<th>Location</th>
<th>Date</th>
<th>Evaluation</th>
<th>Cost (€)</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">SUM</td>
<td>118</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Haircut</td>
<td>Hairdresser</td>
<td>12/09</td>
<td>Great idea</td>
<td>30</td>
</tr>
<tr>
<td>Lasagna</td>
<td>Restaurant</td>
<td>12/09</td>
<td>Regrets</td>
<td>18</td>
</tr>
<tr>
<td>Shoes</td>
<td>Shoeshop</td>
<td>13/09</td>
<td>Big regrets</td>
<td>65</td>
</tr>
<tr>
<td>Toothpaste</td>
<td>Supermarket</td>
<td>13/09</td>
<td>Good</td>
<td>5</td>
</tr>
</tbody>
</table>

</body>
</html>
Loading

0 comments on commit 51f303a

Please sign in to comment.