Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,290 --> 00:00:02,830
The next component that we're going
2
00:00:02,830 --> 00:00:04,743
to build is a table.
3
00:00:06,150 --> 00:00:08,590
So we're going to build a similar table
4
00:00:08,590 --> 00:00:11,933
to this one that we saw in our component gallery.
5
00:00:13,400 --> 00:00:18,270
So again, this is what our final table will look like.
6
00:00:18,270 --> 00:00:22,400
And let's again start by creating a new HTML file.
7
00:00:22,400 --> 00:00:25,453
So 03table.HTML.
8
00:00:27,120 --> 00:00:30,353
And now remember, we will copy the code from this component.
9
00:00:33,260 --> 00:00:34,830
So selecting everything
10
00:00:38,410 --> 00:00:39,660
and then pasting it here.
11
00:00:43,970 --> 00:00:46,450
Then let's also go back here.
12
00:00:46,450 --> 00:00:49,760
So to this base, your URL basically,
13
00:00:49,760 --> 00:00:54,220
and then we're going to select, oh, actually right here,
14
00:00:54,220 --> 00:00:55,840
we need to do that.
15
00:00:55,840 --> 00:00:57,963
So we finished our carousel before.
16
00:00:59,170 --> 00:01:01,070
now let's go back.
17
00:01:01,070 --> 00:01:04,580
So this here is indeed the base URL.
18
00:01:04,580 --> 00:01:06,950
And then here, now we have or,
19
00:01:06,950 --> 00:01:08,853
we need to reload apparently.
20
00:01:09,820 --> 00:01:11,970
So now here is the table.
21
00:01:11,970 --> 00:01:15,490
So it's still empty and so let's get started.
22
00:01:15,490 --> 00:01:18,860
And the first thing that I want to tell you is that tables
23
00:01:18,860 --> 00:01:23,210
are actually not used a lot anymore in web development.
24
00:01:23,210 --> 00:01:25,060
Now, way back in the day,
25
00:01:25,060 --> 00:01:27,920
tables actually used to be the first way
26
00:01:27,920 --> 00:01:30,640
in which developers built layouts.
27
00:01:30,640 --> 00:01:34,160
But now of course, with flexbox and CSS Grid,
28
00:01:34,160 --> 00:01:37,120
we have way better ways of doing that.
29
00:01:37,120 --> 00:01:39,100
However, that being said,
30
00:01:39,100 --> 00:01:42,350
tables do still have a place in HTML,
31
00:01:42,350 --> 00:01:44,390
especially if we are really trying
32
00:01:44,390 --> 00:01:47,970
to represent some dataset that can be displayed
33
00:01:47,970 --> 00:01:49,300
using a table.
34
00:01:49,300 --> 00:01:52,640
And so then the table is the most semantic way
35
00:01:52,640 --> 00:01:54,230
of doing that.
36
00:01:54,230 --> 00:01:57,913
So let's see how it works in HTML.
37
00:02:00,140 --> 00:02:03,130
So we have the table element
38
00:02:03,130 --> 00:02:06,260
and so all starts with that element.
39
00:02:06,260 --> 00:02:07,690
So the table element,
40
00:02:07,690 --> 00:02:10,980
and then for each of the rows that we want in the table,
41
00:02:10,980 --> 00:02:13,490
we use a TR element.
42
00:02:13,490 --> 00:02:18,080
So TR stands for table row, right?
43
00:02:18,080 --> 00:02:21,750
And then inside of the row for each column,
44
00:02:21,750 --> 00:02:24,770
so basically for each piece of data,
45
00:02:24,770 --> 00:02:26,823
we use a TD element.
46
00:02:28,100 --> 00:02:31,330
So TD stands for table data.
47
00:02:31,330 --> 00:02:35,300
So here in this table, we basically want four columns.
48
00:02:35,300 --> 00:02:36,530
So just like this.
49
00:02:36,530 --> 00:02:41,530
So Chair, the Laid Back, the Worker Bee and the Chair 4/2,
50
00:02:41,606 --> 00:02:43,980
because those are the four chair names
51
00:02:43,980 --> 00:02:48,000
that we had in the project in the last section.
52
00:02:48,000 --> 00:02:49,660
Remember that?
53
00:02:49,660 --> 00:02:52,410
And so here, this is basically simply a table,
54
00:02:52,410 --> 00:02:56,933
which contains some of the information about those chairs.
55
00:03:04,160 --> 00:03:07,763
And now the Chair 4/2.
56
00:03:08,900 --> 00:03:11,150
Let's also create another row right away
57
00:03:11,150 --> 00:03:15,310
before we actually see what it looks like in our HTML.
58
00:03:15,310 --> 00:03:17,420
And let's actually create another row here
59
00:03:17,420 --> 00:03:19,913
before we see the result in the browser.
60
00:03:21,100 --> 00:03:22,720
So the second row.
61
00:03:22,720 --> 00:03:26,000
And so therefore another TR element here.
62
00:03:26,000 --> 00:03:28,340
And then once again inside of that,
63
00:03:28,340 --> 00:03:31,163
one TD for each of the pieces of data.
64
00:03:33,300 --> 00:03:36,033
So here we want the width,
65
00:03:38,320 --> 00:03:43,320
so this row here is all about the width dimension.
66
00:03:43,750 --> 00:03:47,083
So 80 centimeters then here,
67
00:03:48,230 --> 00:03:52,803
and this other one has 220 centimeters.
68
00:03:55,860 --> 00:03:57,270
Okay.
69
00:03:57,270 --> 00:03:59,980
So let's check it out and
70
00:03:59,980 --> 00:04:03,170
well, for now that doesn't look so great,
71
00:04:03,170 --> 00:04:05,430
but still we can see that somehow,
72
00:04:05,430 --> 00:04:07,510
it is a table actually.
73
00:04:07,510 --> 00:04:11,170
So this 60, for example, starts right here
74
00:04:11,170 --> 00:04:12,810
below the Worker Bee.
75
00:04:12,810 --> 00:04:14,730
So in the same place here.
76
00:04:14,730 --> 00:04:17,000
And so it does look like a table already,
77
00:04:17,000 --> 00:04:20,543
but of course we will need to style it a lot using CSS.
78
00:04:21,590 --> 00:04:23,970
But for now, let's actually finish here
79
00:04:23,970 --> 00:04:25,583
and add the other two rows.
80
00:04:29,860 --> 00:04:32,680
And to see that this is actually a lot of work
81
00:04:32,680 --> 00:04:34,473
writing all this code like this.
82
00:04:36,190 --> 00:04:38,773
Here I'm even missing DTD.
83
00:04:43,750 --> 00:04:45,170
And if you think about it,
84
00:04:45,170 --> 00:04:47,720
we could actually create the exact same thing
85
00:04:47,720 --> 00:04:49,363
using CSS Grid.
86
00:04:50,400 --> 00:04:51,250
Right?
87
00:04:51,250 --> 00:04:54,000
So this table that we see here on the right side,
88
00:04:54,000 --> 00:04:58,090
you could probably quite easily build that up
89
00:04:58,090 --> 00:05:00,310
using CSS Grid.
90
00:05:00,310 --> 00:05:03,080
However, again, in many situations,
91
00:05:03,080 --> 00:05:07,030
using a table is actually the more semantic way of doing it.
92
00:05:07,030 --> 00:05:09,790
So if you really have tabular data,
93
00:05:09,790 --> 00:05:13,950
so data that really can be fit into a table like this,
94
00:05:13,950 --> 00:05:17,500
then using the right element for the job
95
00:05:17,500 --> 00:05:19,423
is many times the best way to go.
96
00:05:21,100 --> 00:05:23,010
So even though visually,
97
00:05:23,010 --> 00:05:25,310
we could create the same thing in another way.
98
00:05:28,440 --> 00:05:31,683
But anyway, finishing here our table,
99
00:05:34,350 --> 00:05:36,013
we're almost done with that.
100
00:05:38,370 --> 00:05:41,200
And of course, we could have just copied this code here,
101
00:05:41,200 --> 00:05:42,593
then replaced everything,
102
00:05:43,660 --> 00:05:45,940
but while, as I mentioned in the beginning,
103
00:05:45,940 --> 00:05:48,497
actually typing the code is the way that it gets
104
00:05:48,497 --> 00:05:49,743
into your brain.
105
00:05:51,360 --> 00:05:52,360
Okay.
106
00:05:52,360 --> 00:05:54,870
So this is our table.
107
00:05:54,870 --> 00:05:57,710
And as I mentioned, we still need to style this a lot
108
00:05:57,710 --> 00:05:59,230
using CSS,
109
00:05:59,230 --> 00:06:02,410
but let's actually leave that for the next video,
110
00:06:02,410 --> 00:06:04,950
because there's still some more things that I want
111
00:06:04,950 --> 00:06:07,300
to show you about tables.
112
00:06:07,300 --> 00:06:11,520
So right now all the cells in our table here look basically
113
00:06:11,520 --> 00:06:13,170
exactly the same.
114
00:06:13,170 --> 00:06:17,780
However, usually in a table, the first row is different.
115
00:06:17,780 --> 00:06:19,720
So as we see here in the demo,
116
00:06:19,720 --> 00:06:21,928
the first row has this background color
117
00:06:21,928 --> 00:06:24,120
and the text is bold.
118
00:06:24,120 --> 00:06:27,730
And the same thing here for the first column.
119
00:06:27,730 --> 00:06:29,330
So the text is bold
120
00:06:29,330 --> 00:06:31,790
and so it's kind of special and different
121
00:06:31,790 --> 00:06:36,170
from the data itself that is right here, right?
122
00:06:36,170 --> 00:06:40,110
And we can actually do that using HTML.
123
00:06:40,110 --> 00:06:43,080
So basically marking this first column here
124
00:06:43,080 --> 00:06:45,010
as being special.
125
00:06:45,010 --> 00:06:46,640
And what's special, I mean,
126
00:06:46,640 --> 00:06:49,230
that we can basically tell our HTML
127
00:06:49,230 --> 00:06:53,180
that this first row here is the head of the table
128
00:06:53,180 --> 00:06:56,690
and the rest of the content is the table's body.
129
00:06:56,690 --> 00:06:58,210
So to do that,
130
00:06:58,210 --> 00:07:03,210
we can wrap this first row here into the T head element.
131
00:07:04,330 --> 00:07:05,690
So that's table head
132
00:07:06,594 --> 00:07:09,810
and then I will use that trick of using option,
133
00:07:09,810 --> 00:07:13,563
or alt down, to move this down.
134
00:07:14,880 --> 00:07:15,833
Oh, sorry.
135
00:07:16,760 --> 00:07:20,093
And then here we have the T body.
136
00:07:23,750 --> 00:07:27,310
Now let's actually copy this or cut
137
00:07:27,310 --> 00:07:29,600
and put it here at the end.
138
00:07:29,600 --> 00:07:31,430
And now if we give this a save,
139
00:07:31,430 --> 00:07:33,740
then it actually still looks the same
140
00:07:33,740 --> 00:07:37,023
because this is only one part of what we need to do.
141
00:07:38,270 --> 00:07:39,440
So again,
142
00:07:39,440 --> 00:07:42,460
first we declared that this first row here
143
00:07:42,460 --> 00:07:44,650
should be the head of the table.
144
00:07:44,650 --> 00:07:46,200
And so now semantically,
145
00:07:46,200 --> 00:07:48,460
this table makes a lot more sense
146
00:07:48,460 --> 00:07:50,120
because it's nicely divided
147
00:07:50,120 --> 00:07:53,140
into these more logical sections.
148
00:07:53,140 --> 00:07:56,140
So we have the table head and the table body,
149
00:07:56,140 --> 00:08:00,150
but if we actually want the cell here to look different,
150
00:08:00,150 --> 00:08:04,100
so if we want to mark it as an actual table head,
151
00:08:04,100 --> 00:08:07,143
we need to use a different element here also.
152
00:08:08,720 --> 00:08:12,780
So here, instead of using TD, we use TH,
153
00:08:12,780 --> 00:08:15,500
which is basically a table head cell
154
00:08:15,500 --> 00:08:18,310
within this group of cells.
155
00:08:18,310 --> 00:08:20,063
So inside of this row here.
156
00:08:21,280 --> 00:08:22,580
All right?
157
00:08:22,580 --> 00:08:24,780
So let's do that with all of these four.
158
00:08:24,780 --> 00:08:29,173
We want all of them to be a table head cell.
159
00:08:30,280 --> 00:08:35,280
And so now if we reload, now they look bold and special.
160
00:08:35,290 --> 00:08:36,950
All right.
161
00:08:36,950 --> 00:08:40,430
And now let's do the same actually with these here.
162
00:08:40,430 --> 00:08:43,460
So with the width, depth and height,
163
00:08:43,460 --> 00:08:47,760
and so we can do the same here inside of all the other rows.
164
00:08:47,760 --> 00:08:49,490
So this cell right here,
165
00:08:49,490 --> 00:08:52,630
we can also declare it as the table head cell
166
00:08:52,630 --> 00:08:56,230
of this basically group of cells here.
167
00:08:56,230 --> 00:08:58,630
So this row, in this case.
168
00:08:58,630 --> 00:09:00,800
And so now as we reload,
169
00:09:00,800 --> 00:09:04,600
then this one is marked special as well.
170
00:09:04,600 --> 00:09:07,393
And so let's do the same here with these two.
171
00:09:08,550 --> 00:09:12,050
And with that, we have a nice semantic table,
172
00:09:12,050 --> 00:09:15,280
which now makes a lot of sense visually
173
00:09:15,280 --> 00:09:18,830
and also in terms of what the code represents.
174
00:09:18,830 --> 00:09:19,663
Great.
175
00:09:19,663 --> 00:09:23,060
So with that, we finished the HTML markup.
176
00:09:23,060 --> 00:09:27,180
Now there's a lot more things to do with tables in HTML.
177
00:09:27,180 --> 00:09:30,500
So things like spanning across multiple rows
178
00:09:30,500 --> 00:09:32,240
or multiple columns,
179
00:09:32,240 --> 00:09:35,310
but that is not really necessary to learn these days,
180
00:09:35,310 --> 00:09:36,630
I believe.
181
00:09:36,630 --> 00:09:40,330
So this is more of an overview of how we work with tables,
182
00:09:40,330 --> 00:09:43,120
just in case you see one in the wild,
183
00:09:43,120 --> 00:09:47,370
because otherwise this code might be quite confusing to you.
184
00:09:47,370 --> 00:09:50,786
So like, what is all these TRs and TH
185
00:09:50,786 --> 00:09:53,530
and TD here actually mean?
186
00:09:53,530 --> 00:09:57,180
And so now you know that it is a table, right?
187
00:09:57,180 --> 00:09:58,190
But anyway,
188
00:09:58,190 --> 00:10:00,170
let's now go to the next lecture
189
00:10:00,170 --> 00:10:02,203
and actually style this table.
13373
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.