Skip to content

Commit 11bbf93

Browse files
jackson-jackson-
committed
numbered lessons
1 parent 82f4ed4 commit 11bbf93

14 files changed

+101
-0
lines changed

‎INTRO.md ‎0-INTRO.md

File renamed without changes.

‎FOUNDATIONS.md ‎1-FOUNDATIONS.md

File renamed without changes.

‎BASIC_TEMPLATE.md ‎2-BASIC_TEMPLATE.md

File renamed without changes.

‎FORMATTING.md ‎3-FORMATTING.md

File renamed without changes.

‎HEADINGS_PARAGRAPHS.md ‎4-HEADINGS_PARAGRAPHS.md

File renamed without changes.

‎LINKS.md ‎5-LINKS.md

File renamed without changes.

‎IMAGES.md ‎6-IMAGES.md

File renamed without changes.

‎LISTS.md ‎7-LISTS.md

File renamed without changes.

‎8-TABLES.md

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
# Tables
2+
Certain data looks better inside of a table. Maybe we need to display some data to the user.
3+
4+
## Displaying a table
5+
To create a table we have to use a few different tags.
6+
* *table* - this tag creates the overall table box
7+
* *th* - Stands for table header
8+
* *td* - Stands for table data
9+
* *tr* - Stands for table row. You put table headers or table data in here.
10+
11+
Let's look at a real example of a table:
12+
```html
13+
<body>
14+
<table>
15+
<tr>
16+
<th>header 1</th>
17+
<th>header 2</th>
18+
</tr>
19+
<tr>
20+
<td>data 1</td>
21+
<td>data 2</td>
22+
</tr>
23+
</table>
24+
</body>
25+
```
26+
This renders to this:
27+
![tables](./images/tables.png)
28+
You'll notice that the table headers are emboldened to show their importance. The second thing you might notice is that there aren't any lines. We can add lines but using the *border* attribute. Add this to your table and see how it renders:
29+
```html
30+
<table border="1">
31+
```
32+
It should look something like this:
33+
![borders](./images/borders.png)
34+
35+
## Colspan
36+
Colspans are used to have cells span over multiples columns. For example:
37+
```html
38+
<body>
39+
<table>
40+
<tr>
41+
<td colspan="3">100%</td>
42+
</tr>
43+
<tr>
44+
<td>33%</td>
45+
<td>33%</td>
46+
<td>33%</td>
47+
</tr>
48+
<tr>
49+
<td>33%</td>
50+
<td colspan="2">67%</td>
51+
</tr>
52+
</table>
53+
</body>
54+
```
55+
This renders to this:
56+
![colspan](./images/colspan.png)
57+
58+
## Rowspan
59+
Rowspans are used to have cells span over multiples rows. For example:
60+
```html
61+
<body>
62+
<table>
63+
<tr>
64+
<td rowspan="3">100%</td>
65+
<td>33%</td>
66+
<td>33%</td>
67+
</tr>
68+
<tr>
69+
<td>33%</td>
70+
<td rowspan="2">67%</td>
71+
</tr>
72+
<tr>
73+
<td>33%</td>
74+
</tr>
75+
</table>
76+
</body>
77+
```
78+
This renders to this:
79+
![rowspan](./images/rowspan.png)

‎ex.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html>
2+
3+
<head></head>
4+
5+
<body>
6+
<table border="1">
7+
<tr>
8+
<td rowspan="3">100%</td>
9+
<td>33%</td>
10+
<td>33%</td>
11+
</tr>
12+
<tr>
13+
<td>33%</td>
14+
<td rowspan="2">67%</td>
15+
</tr>
16+
<tr>
17+
<td>33%</td>
18+
</tr>
19+
</table>
20+
</body>
21+
22+
</html>

‎images/borders.png

9.56 KB
Loading

‎images/colspan.png

9.41 KB
Loading

‎images/rowspan.png

9.88 KB
Loading

‎images/tables.png

9.24 KB
Loading

0 commit comments

Comments
 (0)