1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8">
6
7 <!-- set the text that goes in the browser tab -->
8 <title>Styled Table Examples</title>
9
10 <!--
11 File: Student Resources/Website Development I/CodeSamples/TableExample_CreatingAWebSite_pp234-236.html
12 maintained by Jesse M. Heines
13 Copyright (c) 2022 by Jesse Heines. All rights reserved. May be freely
14 copied or excerpted for educational purposes with credit to the author.
15 updated by JMH on September 6, 2022 at 1:25 PM
16 updated by JMH on October 23, 2022 at 8:23 PM
17 -->
18
19 <!-- set the icon to use in the browser tab -->
20 <link href="images/OldManInTheMountain_16x16.ico" rel="icon" type="image/x-icon">
21
22 <style>
23 h1 { /* style the top-level header */
24 background-color: green ; /* green background */
25 color: white ; /* white text */
26 padding: 0 0.75em ; /* add a bit of padding on the left and right */
27 border-radius: 10px ; /* round the corners of the background */
28 text-align: center ; /* center the text */
29 height: 1.35em ; /* increase the height of the background slightly */
30 }
31 h2 { /* style the headings for each table */
32 color: blue ; /* blue text */
33 margin-top: 1.5em ; /* separate from the previous table */
34 margin-bottom: 0 ; /* remove the bottom margin */
35 }
36 p { /* style the explanatory paragraphs */
37 font-style: italic ; /* display in italic text */
38 margin-top: 0.5em ; /* reduce the top margin */
39 }
40 strong { /* add properties to the <strong> tag */
41 font-style: normal ; /* display in normal text rather than italics */
42 font-family: monospace, sans-serif ; /* display in a plain font */
43 padding: 0 5px ; /* add padding on the left and right */
44 color: red ; /* display text in read */
45 }
46 .Version7 { /* define a class to make the Version 7 code more compact */
47 text-align: right ; /* right-justify text in <td> elements with this class */
48 border-bottom: 1px solid black ; /* add bottom border to those elements, too */
49 }
50 #Version8 th {
51 background-color: black ; /* setup for reverse video, i.e., */
52 color: white ; /* white text on a black background */
53 }
54 /* #Version8 tr:nth-child( 2n+2 ) { */
55 #Version8 tr:nth-child( even ) {
56 background-color: PeachPuff ; /* background color for cells in even-numbered rows */
57 }
58 /* #Version8 tr:nth-child( 2n+3 ) { */
59 #Version8 tr:nth-child( odd ) {
60 background-color: Aquamarine; /* background color for cells in odd-numbered rows */
61 }
62 #Version8 td:nth-child( 1n+2 ) {
63 text-align: right ; /* make the last three columns right-justified */
64 }
65 .bgcolor {
66 font-style: normal ; /* display in normal text rather than italics */
67 font-family: monospace, sans-serif ; /* display in a plain font */
68 padding: 0 0.75rem ; /* add padding on the left and right */
69 border-radius: 8px ; /* round the corners */
70 color: red ; /* display text in read */
71 font-weight: bold ; /* make text weight the same as for <strong> */
72 }
73 pre {
74 font-weight: bold ; /* make text weight the same as for <strong> */
75 font-size: 1.2em ; /* make text a little bigger than normal */
76 }
77 comment, .green { /* add a custom <comment> tag and a "green" class */
78 color: green ; /* in both cases, set the text color to green */
79 }
80 red, .red { /* add a custom <red> tag and a "red" class */
81 color: red ; /* in both cases, set the text color to red */
82 }
83 .bold { /* add a "bold" class */
84 font-weight: bold ; /* render text in boldface */
85 }
86
87 /* https://www.w3schools.com/cssref/pr_print_pagebb.asp */
88 @media print {
89 .page-break {
90 page-break-before: always ;
91 }
92 }
93 </style>
94
95 </head>
96
97 <body>
98
99 <!-- body code goes here, such as the following -->
100 <h1>Styled Table Examples</h1>
101 <h2 style="margin-bottom: 0.1em">Demonstration Code</h2>
102 <p style="margin-top: 0">by Jesse Heines, updated October 23, 2022</p>
103 <p>adapted from <span style="font-style: normal">Creating a Web Site</span> by Matthew
104 MacDonald, pages 234-236</p>
105
106 <h2>Version 1</h2>
107 <p>This is a plain table with no embellishments.</p>
108 <pre><table id="Version1"></pre>
109 <table id="Version1">
110 <tr>
111 <th>City</th>
112 <th>2022<br>Population</th>
113 <th>2020<br>Census</th>
114 <th>Change</th>
115 </tr>
116 <tr>
117 <td>Manchester</td>
118 <td>116860</td>
119 <td>109565</td>
120 <td>6.66</td>
121 </tr>
122 <tr>
123 <td>Nashua</td>
124 <td>92288</td>
125 <td>86494</td>
126 <td>6.70</td>
127 </tr>
128 <tr>
129 <td>Concord</td>
130 <td>44232</td>
131 <td>42695</td>
132 <td>3.60</td>
133 </tr>
134 <tr>
135 <td>Dover</td>
136 <td>33291</td>
137 <td>29987</td>
138 <td>11.02</td>
139 </tr>
140 <tr>
141 <td>Rochester</td>
142 <td>33040</td>
143 <td>29752</td>
144 <td>11.05</td>
145 </tr>
146 </table>
147
148 <h2>Version 2</h2>
149 <p>This table has a <strong>border</strong> attribute with a value of
150 <strong>5 pixels</strong>.</p>
151 <pre><table id="Version2" <red>border="5px"</red>></pre>
152 <table id="Version2" border="5px">
153 <tr>
154 <th>City</th>
155 <th>2022<br>Population</th>
156 <th>2020<br>Census</th>
157 <th>Change</th>
158 </tr>
159 <tr>
160 <td>Manchester</td>
161 <td>116860</td>
162 <td>109565</td>
163 <td>6.66</td>
164 </tr>
165 <tr>
166 <td>Nashua</td>
167 <td>92288</td>
168 <td>86494</td>
169 <td>6.70</td>
170 </tr>
171 <tr>
172 <td>Concord</td>
173 <td>44232</td>
174 <td>42695</td>
175 <td>3.60</td>
176 </tr>
177 <tr>
178 <td>Dover</td>
179 <td>33291</td>
180 <td>29987</td>
181 <td>11.02</td>
182 </tr>
183 <tr>
184 <td>Rochester</td>
185 <td>33040</td>
186 <td>29752</td>
187 <td>11.05</td>
188 </tr>
189 </table>
190
191 <h2 class="page-break">Version 3</h2>
192 <p>This version adds a <strong>cellspacing</strong> attribute with a value of
193 <strong>10 pixels</strong>.</p>
194 <pre><table id="Version3" border="5px" <red>cellspacing="10px"<red/>></pre>
195 <table id="Version3" border="5px" cellspacing="10px">
196 <tr>
197 <th>City</th>
198 <th>2022<br>Population</th>
199 <th>2020<br>Census</th>
200 <th>Change</th>
201 </tr>
202 <tr>
203 <td>Manchester</td>
204 <td>116860</td>
205 <td>109565</td>
206 <td>6.66</td>
207 </tr>
208 <tr>
209 <td>Nashua</td>
210 <td>92288</td>
211 <td>86494</td>
212 <td>6.70</td>
213 </tr>
214 <tr>
215 <td>Concord</td>
216 <td>44232</td>
217 <td>42695</td>
218 <td>3.60</td>
219 </tr>
220 <tr>
221 <td>Dover</td>
222 <td>33291</td>
223 <td>29987</td>
224 <td>11.02</td>
225 </tr>
226 <tr>
227 <td>Rochester</td>
228 <td>33040</td>
229 <td>29752</td>
230 <td>11.05</td>
231 </tr>
232 </table>
233
234 <h2>Version 4</h2>
235 <p>This version adds a <strong>cellpadding</strong> attribute with a value of
236 <strong>10 pixels</strong>.</p>
237 <pre><table id="Version4" border="5px" cellspacing="10px" <red>cellpadding="10px"</red>></pre>
238 <table id="Version4" border="5px" cellspacing="10px" cellpadding="10px">
239 <tr>
240 <th>City</th>
241 <th>2022<br>Population</th>
242 <th>2020<br>Census</th>
243 <th>Change</th>
244 </tr>
245 <tr>
246 <td>Manchester</td>
247 <td>116860</td>
248 <td>109565</td>
249 <td>6.66</td>
250 </tr>
251 <tr>
252 <td>Nashua</td>
253 <td>92288</td>
254 <td>86494</td>
255 <td>6.70</td>
256 </tr>
257 <tr>
258 <td>Concord</td>
259 <td>44232</td>
260 <td>42695</td>
261 <td>3.60</td>
262 </tr>
263 <tr>
264 <td>Dover</td>
265 <td>33291</td>
266 <td>29987</td>
267 <td>11.02</td>
268 </tr>
269 <tr>
270 <td>Rochester</td>
271 <td>33040</td>
272 <td>29752</td>
273 <td>11.05</td>
274 </tr>
275 </table>
276
277 <h2 class="page-break">Version 5</h2>
278 <p>This version adds attribute <strong>style='text-align: right'</strong>
279 to the <strong>td</strong> tags in the last three columns.</p>
280 <pre><table id="Version5" border="5px" cellspacing="10px" cellpadding="10px">
281 <tr>
282 <td>Manchester</td>
283 <td <red>style='text-align: right'</red>>116860</td>
284 <td <red>style='text-align: right'</red>>109565</td>
285 <td <red>style='text-align: right'</red>>6.66</td>
286 </tr></pre>
287 <table id="Version5" border="5px" cellspacing="10px" cellpadding="10px">
288 <tr>
289 <th>City</th>
290 <th>2022<br>Population</th>
291 <th>2020<br>Census</th>
292 <th>Change</th>
293 </tr>
294 <tr>
295 <td>Manchester</td>
296 <td style='text-align: right'>116860</td>
297 <td style='text-align: right'>109565</td>
298 <td style='text-align: right'>6.66</td>
299 </tr>
300 <tr>
301 <td>Nashua</td>
302 <td style='text-align: right'>92288</td>
303 <td style='text-align: right'>86494</td>
304 <td style='text-align: right'>6.70</td>
305 </tr>
306 <tr>
307 <td>Concord</td>
308 <td style='text-align: right'>44232</td>
309 <td style='text-align: right'>42695</td>
310 <td style='text-align: right'>3.60</td>
311 </tr>
312 <tr>
313 <td>Dover</td>
314 <td style='text-align: right'>33291</td>
315 <td style='text-align: right'>29987</td>
316 <td style='text-align: right'>11.02</td>
317 </tr>
318 <tr>
319 <td>Rochester</td>
320 <td style='text-align: right'>33040</td>
321 <td style='text-align: right'>29752</td>
322 <td style='text-align: right'>11.05</td>
323 </tr>
324 </table>
325
326 <h2>Version 6</h2>
327 <p>This version adds commas to the values in the second and third columns
328 just to make these numbers easier to read.</p>
329 <pre><table id="Version6" border="5px" cellspacing="10px" cellpadding="10px"></pre>
330 <table id="Version6" border="5px" cellspacing="10px" cellpadding="10px">
331 <tr>
332 <th>City</th>
333 <th>2022<br>Population</th>
334 <th>2020<br>Census</th>
335 <th>Change</th>
336 </tr>
337 <tr>
338 <td>Manchester</td>
339 <td style='text-align: right'>116<red class="bold">,</red>860</td>
340 <td style='text-align: right'>109<red class="bold">,</red>565</td>
341 <td style='text-align: right'>6.66</td>
342 </tr>
343 <tr>
344 <td>Nashua</td>
345 <td style='text-align: right'>92<red class="bold">,</red>288</td>
346 <td style='text-align: right'>86<red class="bold">,</red>494</td>
347 <td style='text-align: right'>6.70</td>
348 </tr>
349 <tr>
350 <td>Concord</td>
351 <td style='text-align: right'>44<red class="bold">,</red>232</td>
352 <td style='text-align: right'>42<red class="bold">,</red>695</td>
353 <td style='text-align: right'>3.60</td>
354 </tr>
355 <tr>
356 <td>Dover</td>
357 <td style='text-align: right'>33<red class="bold">,</red>291</td>
358 <td style='text-align: right'>29<red class="bold">,</red>987</td>
359 <td style='text-align: right'>11.02</td>
360 </tr>
361 <tr>
362 <td>Rochester</td>
363 <td style='text-align: right'>33<red class="bold">,</red>040</td>
364 <td style='text-align: right'>29<red class="bold">,</red>752</td>
365 <td style='text-align: right'>11.05</td>
366 </tr>
367 </table>
368
369 <h2 class="page-break">Version 7</h2>
370 <p>This version demonstrates the use of inline CSS <strong>style</strong> attributes
371 to make the table more attractive and the use of a CSS <strong>class</strong>
372 attribute to make the application of those styles more compact.</p>
373 <p><span class="red bold"><em>Important:</em></span> Note that style sheet comments are enclosed in<strong class="green"> /* ... */
374 </strong>while HTML comments are enclosed in<strong class="green">
375 <span style="white-space: nowrap"><!-- ... --></strong>.</span></p>
376 <pre><style> <comment>/* <em>this is an internal style sheet that should go in the <head> section</em> */</comment>
377 .Version7 { <comment>/* <em>define a class to make the Version 7 code more compact</em> */</comment>
378 text-align: right ; <comment>/* <em>right-justify text in <td> elements with this class</em> */</comment>
379 border-bottom: 1px solid black ; <comment>/* <em>add bottom border to those elements, too</em> */</comment>
380 }
381 </style></pre>
382 <pre><comment><!-- <em>remove the border by setting it to "0px"</em> --></comment>
383 <table id="Version7" <red>border="0px"</red> cellspacing="0px" cellpadding="10px">
384 <tr <red>style='background-color: black'</red>> <comment><!-- <em>set background color of first row to black</em> --></comment>
385 <th <red>style='color: white'</red>>City</th> <comment><!-- <em>set text color of first row cells to white</em> --></comment>
386 <th <red>style='color: white'</red>>2022<br>Population</th>
387 <th <red>style='color: white'</red>>2020<br>Census</th>
388 <th <red>style='color: white'</red>>Change</th>
389 </tr>
390 <tr>
391 <comment><!-- <em>set the bottom border of each cell to 1-pixel solid black</em> --></comment>
392 <td <red>style='border-bottom: 1px solid black'</red>>Manchester</td>
393 <comment><!-- <em>set the text alignment of cells 2-4 to right-justified</em> --></comment>
394 <td <red>style='text-align: right ; border-bottom: 1px solid black'</red>>116,860</td>
395 <td <red>style='text-align: right ; border-bottom: 1px solid black'</red>>109,565</td>
396 <td <red>style='text-align: right ; border-bottom: 1px solid black'</red>>6.66</td>
397 </tr>
398 ...
399 <tr>
400 <comment><!-- <em>set the bottom border of each cell to 1-pixel solid black</em> --></comment>
401 <td <red>style='border-bottom: 1px solid black'</red>>Concord</td>
402 <comment><!-- <em>do the same as before, but using a class</em> --></comment>
403 <td <red>class='Version7'</red>>44,232</td>
404 <td <red>class='Version7'</red>>42,695</td>
405 <td <red>class='Version7'</red>>3.60</td>
406 </tr>
407 </table></pre>
408 <table id="Version7" border="0px" cellspacing="0px" cellpadding="10px">
409 <tr style='background-color: black'>
410 <th style='color: white'>City</th>
411 <th style='color: white'>2022<br>Population</th>
412 <th style='color: white'>2020<br>Census</th>
413 <th style='color: white'>Change</th>
414 </tr>
415 <tr>
416 <td style='border-bottom: 1px solid black'>Manchester</td>
417 <td style='text-align: right ; border-bottom: 1px solid black'>116,860</td>
418 <td style='text-align: right ; border-bottom: 1px solid black'>109,565</td>
419 <td style='text-align: right ; border-bottom: 1px solid black'>6.66</td>
420 </tr>
421 <tr>
422 <td style='border-bottom: 1px solid black'>Nashua</td>
423 <td style='text-align: right ; border-bottom: 1px solid black'>92,288</td>
424 <td style='text-align: right ; border-bottom: 1px solid black'>86,494</td>
425 <td style='text-align: right ; border-bottom: 1px solid black'>6.70</td>
426 </tr>
427 <tr>
428 <td style='border-bottom: 1px solid black'>Concord</td>
429 <td class='Version7'>44,232</td>
430 <td class='Version7'>42,695</td>
431 <td class='Version7'>3.60</td>
432 </tr>
433 <tr>
434 <td style='border-bottom: 1px solid black'>Dover</td>
435 <td class='Version7'>33,291</td>
436 <td class='Version7'>29,987</td>
437 <td class='Version7'>11.02</td>
438 </tr>
439 <tr>
440 <td style='border-bottom: 1px solid black'>Rochester</td>
441 <td class='Version7'>33,040</td>
442 <td class='Version7'>29,752</td>
443 <td class='Version7'>11.05</td>
444 </tr>
445 </table>
446
447 <h2 class="page-break">Version 8</h2>
448 <p>This version demonstrates the use of the CSS <strong>nth-child</strong> pseudo-class
449 to make the table even more attractive. (The background colors used here are
450 <span style="background-color: peachpuff" class="bgcolor">PeachPuff</span> and
451 <span style="background-color: aquamarine" class="bgcolor">Aquamarine</span>.</p>
452 <pre><style> <comment>/* <em>this is an internal style sheet that should go in the <head> section</em> */</comment>
453 #Version8 th {
454 background-color: black ; <comment>/* <em>setup for reverse video, that is,</em> */</comment>
455 color: white ; <comment>/* <em>white text on a black background</em> */</comment>
456 }
457 #Version8 tr<red>:nth-child( even )</red> { <comment>/* <em>format even-numbered rows</em> */</comment>
458 background-color: PeachPuff ; <comment>/* <em>background color for cells in even-numbered rows</em> */</comment>
459 }
460 #Version8 tr<red>:nth-child( odd )</red> { <comment>/* <em>format odd-numbered rows</em> */</comment>
461 background-color: Aquamarine; <comment>/* <em>background color for cells in odd-numbered rows</em> */</comment>
462 }
463 #Version8 td<red>:nth-child( 1n+2 )</red> { <comment>/* <em>format every column (1n) starting with the 2nd (+2)</em> */</comment>
464 text-align: right ; <comment>/* <em>make the last three columns right-justified</em> */</comment>
465 }
466 </style></pre>
467 <pre><table id="Version8" border="0px" cellspacing="0px" cellpadding="10px"></pre>
468 <p>Note that there are no inline styles at all in this version. All formatting
469 is done by the internal style sheet.</p>
470 <table id="Version8" border="0px" cellspacing="0px" cellpadding="10px">
471 <tr>
472 <th>City</th>
473 <th>2022<br>Population</th>
474 <th>2020<br>Census</th>
475 <th>Change</th>
476 </tr>
477 <tr>
478 <td>Manchester</td>
479 <td>116,860</td>
480 <td>109,565</td>
481 <td>6.66</td>
482 </tr>
483 <tr>
484 <td>Nashua</td>
485 <td>92,288</td>
486 <td>86,494</td>
487 <td>6.70</td>
488 </tr>
489 <tr>
490 <td>Concord</td>
491 <td>44,232</td>
492 <td>42,695</td>
493 <td>3.60</td>
494 </tr>
495 <tr>
496 <td>Dover</td>
497 <td>33,291</td>
498 <td>29,987</td>
499 <td>11.02</td>
500 </tr>
501 <tr>
502 <td>Rochester</td>
503 <td>33,040</td>
504 <td>29,752</td>
505 <td>11.05</td>
506 </tr>
507 </table>
508
509 </body>
510
511 </html>