Skip to content

Commit 7f3ba97

Browse files
rachelandrewrachelandrew
committed
tables task
1 parent 8bc5f76 commit 7f3ba97

File tree

3 files changed

+300
-0
lines changed

3 files changed

+300
-0
lines changed

‎learn/tasks/tables/marking.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
# Marking Guide for Tables tasks
2+
3+
The lesson on styling tables takes a plain table and styles it in a garish way. In the task we ask the student to create a far more subtle version of the table using some best practices for table readability from https://alistapart.com/article/web-typography-tables/.
4+
5+
The below is a sample of how the end result could be achieved, using similar techniques to the lesson. However there are a number of ways that would be perfectly correct, perhaps slightly more verbose.
6+
7+
```
8+
table {
9+
border-top: 1px solid #999;
10+
border-bottom: 1px solid #999;
11+
border-collapse: collapse;
12+
table-layout: fixed;
13+
}
14+
15+
th, td {
16+
vertical-align: top;
17+
padding: .3em;
18+
}
19+
20+
tr :nth-child(2),
21+
tr :nth-child(3) {
22+
text-align: right;
23+
}
24+
25+
tr :nth-child(1),
26+
tr :nth-child(4) {
27+
text-align: left;
28+
}
29+
30+
tbody tr:nth-child(odd) {
31+
background-color: #eee;
32+
}
33+
34+
tfoot {
35+
border-top: 1px solid #999;
36+
}
37+
38+
tfoot tr :nth-child(1) {
39+
text-align: right;
40+
}
41+
42+
tfoot tr :nth-child(2) {
43+
text-align: left;
44+
}
45+
```

‎learn/tasks/tables/table-download.html

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Tables Task</title>
6+
7+
<style>
8+
table {
9+
font-size: 75%;
10+
}
11+
</style>
12+
13+
</head>
14+
15+
<body>
16+
<table>
17+
<caption>A summary of the UK's most famous punk bands</caption>
18+
<thead>
19+
<tr>
20+
<th scope="col">Band</th>
21+
<th scope="col">Year formed</th>
22+
<th scope="col">No. of Albums</th>
23+
<th scope="col">Most famous song</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<th scope="row">Buzzcocks</th>
29+
<td>1976</td>
30+
<td>9</td>
31+
<td>Ever fallen in love (with someone you shouldn't've)</td>
32+
</tr>
33+
<tr>
34+
<th scope="row">The Clash</th>
35+
<td>1976</td>
36+
<td>6</td>
37+
<td>London Calling</td>
38+
</tr>
39+
<tr>
40+
<th scope="row">The Damned</th>
41+
<td>1976</td>
42+
<td>10</td>
43+
<td>Smash it up</td>
44+
</tr>
45+
<tr>
46+
<th scope="row">Sex Pistols</th>
47+
<td>1975</td>
48+
<td>1</td>
49+
<td>Anarchy in the UK</td>
50+
</tr>
51+
<tr>
52+
<th scope="row">Sham 69</th>
53+
<td>1976</td>
54+
<td>13</td>
55+
<td>If the kids are united</td>
56+
</tr>
57+
<tr>
58+
<th scope="row">Siouxsie and the Banshees</th>
59+
<td>1976</td>
60+
<td>11</td>
61+
<td>Hong Kong Garden</td>
62+
</tr>
63+
<tr>
64+
<th scope="row">Stiff Little Fingers</th>
65+
<td>1977</td>
66+
<td>10</td>
67+
<td>Suspect Device</td>
68+
</tr>
69+
<tr>
70+
<th scope="row">The Stranglers</th>
71+
<td>1974</td>
72+
<td>17</td>
73+
<td>No More Heroes</td>
74+
</tr>
75+
</tbody>
76+
<tfoot>
77+
<tr>
78+
<th scope="row" colspan="2">Total albums</th>
79+
<td colspan="2">77</td>
80+
</tr>
81+
</tfoot>
82+
</table>
83+
84+
</body>
85+
86+
</html>

‎learn/tasks/tables/table.html

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Tables Task</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
table {
9+
font-size: 75%;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
15+
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
<table>
22+
<caption>A summary of the UK's most famous punk bands</caption>
23+
<thead>
24+
<tr>
25+
<th scope="col">Band</th>
26+
<th scope="col">Year formed</th>
27+
<th scope="col">No. of Albums</th>
28+
<th scope="col">Most famous song</th>
29+
</tr>
30+
</thead>
31+
<tbody>
32+
<tr>
33+
<th scope="row">Buzzcocks</th>
34+
<td>1976</td>
35+
<td>9</td>
36+
<td>Ever fallen in love (with someone you shouldn't've)</td>
37+
</tr>
38+
<tr>
39+
<th scope="row">The Clash</th>
40+
<td>1976</td>
41+
<td>6</td>
42+
<td>London Calling</td>
43+
</tr>
44+
<tr>
45+
<th scope="row">The Damned</th>
46+
<td>1976</td>
47+
<td>10</td>
48+
<td>Smash it up</td>
49+
</tr>
50+
<tr>
51+
<th scope="row">Sex Pistols</th>
52+
<td>1975</td>
53+
<td>1</td>
54+
<td>Anarchy in the UK</td>
55+
</tr>
56+
<tr>
57+
<th scope="row">Sham 69</th>
58+
<td>1976</td>
59+
<td>13</td>
60+
<td>If the kids are united</td>
61+
</tr>
62+
<tr>
63+
<th scope="row">Siouxsie and the Banshees</th>
64+
<td>1976</td>
65+
<td>11</td>
66+
<td>Hong Kong Garden</td>
67+
</tr>
68+
<tr>
69+
<th scope="row">Stiff Little Fingers</th>
70+
<td>1977</td>
71+
<td>10</td>
72+
<td>Suspect Device</td>
73+
</tr>
74+
<tr>
75+
<th scope="row">The Stranglers</th>
76+
<td>1974</td>
77+
<td>17</td>
78+
<td>No More Heroes</td>
79+
</tr>
80+
</tbody>
81+
<tfoot>
82+
<tr>
83+
<th scope="row" colspan="2">Total albums</th>
84+
<td colspan="2">77</td>
85+
</tr>
86+
</tfoot>
87+
</table>
88+
</section>
89+
90+
<textarea class="playable playable-css" style="height: 280px;">
91+
92+
</textarea>
93+
94+
<textarea class="playable playable-html" style="height: 140px;">
95+
<table>
96+
<caption>A summary of the UK's most famous punk bands</caption>
97+
<thead>
98+
<tr>
99+
<th scope="col">Band</th>
100+
<th scope="col">Year formed</th>
101+
<th scope="col">No. of Albums</th>
102+
<th scope="col">Most famous song</th>
103+
</tr>
104+
</thead>
105+
<tbody>
106+
<tr>
107+
<th scope="row">Buzzcocks</th>
108+
<td>1976</td>
109+
<td>9</td>
110+
<td>Ever fallen in love (with someone you shouldn't've)</td>
111+
</tr>
112+
<tr>
113+
<th scope="row">The Clash</th>
114+
<td>1976</td>
115+
<td>6</td>
116+
<td>London Calling</td>
117+
</tr>
118+
<tr>
119+
<th scope="row">The Damned</th>
120+
<td>1976</td>
121+
<td>10</td>
122+
<td>Smash it up</td>
123+
</tr>
124+
<tr>
125+
<th scope="row">Sex Pistols</th>
126+
<td>1975</td>
127+
<td>1</td>
128+
<td>Anarchy in the UK</td>
129+
</tr>
130+
<tr>
131+
<th scope="row">Sham 69</th>
132+
<td>1976</td>
133+
<td>13</td>
134+
<td>If the kids are united</td>
135+
</tr>
136+
<tr>
137+
<th scope="row">Siouxsie and the Banshees</th>
138+
<td>1976</td>
139+
<td>11</td>
140+
<td>Hong Kong Garden</td>
141+
</tr>
142+
<tr>
143+
<th scope="row">Stiff Little Fingers</th>
144+
<td>1977</td>
145+
<td>10</td>
146+
<td>Suspect Device</td>
147+
</tr>
148+
<tr>
149+
<th scope="row">The Stranglers</th>
150+
<td>1974</td>
151+
<td>17</td>
152+
<td>No More Heroes</td>
153+
</tr>
154+
</tbody>
155+
<tfoot>
156+
<tr>
157+
<th scope="row" colspan="2">Total albums</th>
158+
<td colspan="2">77</td>
159+
</tr>
160+
</tfoot>
161+
</table>
162+
</textarea>
163+
164+
<div class="playable-buttons">
165+
<input id="reset" type="button" value="Reset" />
166+
</div>
167+
</body>
168+
<script src="../playable.js"></script>
169+
</html>

0 commit comments

Comments
 (0)