Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Jun 8, 2021
Embed
What would you like to do?
Zigzag Table
<h1>Top England Goal Scorers</h1>
<table class="zigzag">
<thead>
<tr>
<th class="header">Player</th>
<th class="header">Goals</th>
<th class="header">First</th>
<th class="header">Latest</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wayne Rooney</td>
<td>53</td>
<td>06 Sep 2003</td>
<td>27 Jun 2016</td>
</tr>
<tr>
<td>Bobby Charlton</td>
<td>49</td>
<td>19 Apr 1958</td>
<td>20 May 1970</td>
</tr>
<tr>
<td>Gary Lineker</td>
<td>48</td>
<td>26 Mar 1985</td>
<td>29 Apr 1992</td>
</tr>
<tr>
<td>Jimmy Greaves</td>
<td>44</td>
<td>17 May 1959</td>
<td>24 May 1967</td>
</tr>
<tr>
<td>Michael Owen </td>
<td>40</td>
<td>27 May 1998</td>
<td>12 Sep 2007</td>
</tr>
<tr>
<td>Alan Shearer</td>
<td>30</td>
<td>19 Feb 1992</td>
<td>20 Jun 2000</td>
</tr>
<tr>
<td>Tom Finney</td>
<td>30</td>
<td>28 Sep 1946</td>
<td>04 Oct 1958</td>
</tr>
<tr>
<td>Nat Lofthouse</td>
<td>30</td>
<td>22 Nov 1950</td>
<td>22 Oct 1958</td>
</tr>
<tr>
<td>Vivian Woodward</td>
<td>29</td>
<td>14 Feb 1903</td>
<td>13 Mar 1911</td>
</tr>
<tr>
<td>Frank Lampard</td>
<td>29</td>
<td>20 Aug 2003</td>
<td>29 May 2013</td>
</tr>
</tbody>
</table>
h1 {
color:#c00;
font-family:sans-serif;
font-size:2em;
margin-bottom:0;
}
table {
font-family:sans-serif;
th, td {
padding:.25em .5em;
text-align:left;
&:nth-child(2) {
text-align:right;
}
}
td {
background-color:#eee;
}
th {
background-color:#009;
color:#fff;
}
}
.zigzag {
border-collapse:separate;
border-spacing:.25em 1em;
tbody tr:nth-child(odd) {
transform:rotate(2deg);
}
thead tr,
tbody tr:nth-child(even) {
transform:rotate(-2deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment