Skip to content

Commit ff7b7b3

Browse files
matowdevmatowdev
committed
[proj. Journal] Add <table /> tag
Adding a table, interaction/styling. LP from Books
1 parent 457dd98 commit ff7b7b3

5 files changed

Lines changed: 200 additions & 8 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"Starbuzz",
1212
"Webville",
1313
"beanheading",
14+
"cellcolor",
1415
"compl",
1516
"img's",
1617
"rosehips",

‎Learning_HTML_CSS_Freeman_E/Journal/css/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,50 @@ h2 {
2626
font-size: 130%;
2727
}
2828

29+
table {
30+
margin-left: 20px;
31+
margin-right: 20px;
32+
border: 1px solid black;
33+
/* border-spacing: 0; */
34+
border-collapse: collapse;
35+
caption-side: bottom;
36+
}
37+
38+
td,
39+
th {
40+
border: 1px dotted gray;
41+
padding: 5px 15px;
42+
text-align: center;
43+
}
44+
45+
th {
46+
border-bottom: 1px solid black;
47+
color: #c60;
48+
}
49+
50+
.rowColor {
51+
background-color: #fcba7a;
52+
}
53+
54+
.no-border {
55+
border-bottom: none;
56+
}
57+
58+
table table th {
59+
color: lightcoral;
60+
}
61+
62+
caption {
63+
padding-top: 8px;
64+
font-style: italic;
65+
}
66+
2967
blockquote {
3068
font-style: italic;
3169
}
70+
71+
li {
72+
margin-left: 20px;
73+
padding-top: 5px;
74+
list-style-image: url("../img/backpack.gif");
75+
}

‎Learning_HTML_CSS_Freeman_E/Journal/html/table.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Testing Tony's Travels</title>
8+
9+
<style type="text/css">
10+
td,
11+
th {
12+
border: 1px solid black;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<table>
19+
<caption>The cities I visited on my Segway'n USA travels</caption>
20+
<tr>
21+
<th>City</th>
22+
<th>Date</th>
23+
<th>Temperature</th>
24+
<th>Altitude</th>
25+
<th>Population</th>
26+
<th>Diner Rating</th>
27+
</tr>
28+
<tr>
29+
<td>Walla Walla, WA</td>
30+
<td>June 15th</td>
31+
<td>75</td>
32+
<td>1,204 ft</td>
33+
<td>29,686</td>
34+
<td>4/5</td>
35+
</tr>
36+
<tr>
37+
<td>Magic City, ID</td>
38+
<td>June 25th</td>
39+
<td>74</td>
40+
<td>5,312 ft</td>
41+
<td>50</td>
42+
<td>3/5</td>
43+
</tr>
44+
<tr>
45+
<td>Bountiful, UT</td>
46+
<td>July 10th</td>
47+
<td>91</td>
48+
<td>4,226 ft</td>
49+
<td>41,173</td>
50+
<td>4/5</td>
51+
</tr>
52+
<tr>
53+
<td>Last Chance, CO</td>
54+
<td>July 23rd</td>
55+
<td>102</td>
56+
<td>4,780 ft</td>
57+
<td>265</td>
58+
<td>3/5</td>
59+
</tr>
60+
<tr>
61+
<td>Truth or Consequences, NM</td>
62+
<td>August 9th</td>
63+
<td>93</td>
64+
<td>4,242 ft</td>
65+
<td>7,289</td>
66+
<td>5/5</td>
67+
</tr>
68+
<tr>
69+
<td>Why, AZ</td>
70+
<td>August 18th</td>
71+
<td>104</td>
72+
<td>860 ft</td>
73+
<td>480</td>
74+
<td>3/5</td>
75+
</tr>
76+
</table>
77+
</body>
78+
79+
</html>

‎Learning_HTML_CSS_Freeman_E/Journal/img/backpack.gif‎

1.05 KB
Loading

‎Learning_HTML_CSS_Freeman_E/Journal/journal.html‎

Lines changed: 76 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,82 @@ <h1>On a scooter across the United States..</h1>
1515
<h2>20 August, 2012</h2>
1616
<img src="img/segway2.jpg" alt="Me and the desert!">
1717
<p>So, I've already driven 1,200 miles and been to several interesting places:</p>
18-
<ol>
19-
<li>Walla Walla, Washington.</li>
20-
<li>Magic City, Idaho.</li>
21-
<li>Bountiful, Utah.</li>
22-
<li>Last Chance, Colorado.</li>
23-
<li>Wye, Arizona.</li>
24-
<li>Trough-or-Concequence, New Mexico.</li>
25-
</ol>
18+
19+
<table>
20+
<caption>The cities I visited on my Segway'n USA travels</caption>
21+
<tr>
22+
<th>City</th>
23+
<th>Date</th>
24+
<th>Temperature</th>
25+
<th>Altitude</th>
26+
<th>Population</th>
27+
<th>Diner Rating</th>
28+
</tr>
29+
<tr>
30+
<td>Walla Walla, WA</td>
31+
<td>June 15th</td>
32+
<td>75</td>
33+
<td>1,204 ft</td>
34+
<td>29,686</td>
35+
<td>4/5</td>
36+
</tr>
37+
<tr class="rowColor">
38+
<td>Magic City, ID</td>
39+
<td>June 25th</td>
40+
<td>74</td>
41+
<td>5,312 ft</td>
42+
<td>50</td>
43+
<td>3/5</td>
44+
</tr>
45+
<tr>
46+
<td>Bountiful, UT</td>
47+
<td>July 10th</td>
48+
<td>91</td>
49+
<td>4,226 ft</td>
50+
<td>41,173</td>
51+
<td>4/5</td>
52+
</tr>
53+
<tr class="rowColor">
54+
<td>Last Chance, CO</td>
55+
<td>July 23rd</td>
56+
<td>102</td>
57+
<td>4,780 ft</td>
58+
<td>265</td>
59+
<td>3/5</td>
60+
</tr>
61+
<tr>
62+
<td rowspan="2">Truth or Consequences, NM</td>
63+
<td>August 9th</td>
64+
<td>93</td>
65+
<td rowspan="2">4,242 ft</td>
66+
<td rowspan="2">7,289</td>
67+
<td>5/5</td>
68+
</tr>
69+
<tr>
70+
<td>August 27th</td>
71+
<td>98</td>
72+
<td>
73+
<table>
74+
<tr>
75+
<th class="no-border">Tess</th>
76+
<td>5/5</td>
77+
</tr>
78+
<tr>
79+
<th class="no-border">Tony</th>
80+
<td>4/5</td>
81+
</tr>
82+
</table>
83+
</td>
84+
</tr>
85+
<tr class="rowColor">
86+
<td>Why, AZ</td>
87+
<td>August 18th</td>
88+
<td>104</td>
89+
<td>860 ft</td>
90+
<td>480</td>
91+
<td>3/5</td>
92+
</tr>
93+
</table>
2694

2795
<h2>July 14, 2012</h2>
2896
<p>I've seen a couple of Burma Shave-style signs on the side of the road:</p>

0 commit comments

Comments
 (0)