1
00:00:05,910 --> 00:00:09,270
Welcome back, everyone, and this lecture, we're going to discuss tables.

2
00:00:09,690 --> 00:00:11,700
Let's head over to decode editor.

3
00:00:12,540 --> 00:00:15,060
OK, here I am back inside Visual Studio Code.

4
00:00:15,630 --> 00:00:23,040
Now you can create a table in each HTML by first specifying the table tag, and we'll go ahead and click

5
00:00:23,040 --> 00:00:23,310
that.

6
00:00:23,670 --> 00:00:26,910
So you have your starting table tag and your closing table text.

7
00:00:27,940 --> 00:00:29,230
And we'll go and expand this.

8
00:00:29,380 --> 00:00:33,100
And then there's two main distinctions when it comes to a table.

9
00:00:33,130 --> 00:00:37,510
There's the head of the table, which is going to be where your column names are.

10
00:00:37,750 --> 00:00:41,830
And then there are your table rows and within those are table cells.

11
00:00:42,160 --> 00:00:48,220
So there's a couple more tags here and what is kind of normal for other components within each time

12
00:00:48,220 --> 00:00:48,450
out.

13
00:00:48,460 --> 00:00:53,050
So you can think of this as one of the slightly more complicated ones, but that's because we have different

14
00:00:53,050 --> 00:00:54,970
parts of a table want to be able to define.

15
00:00:55,360 --> 00:01:01,630
So we can start off with a table head and then inside this head is where we can begin to put the column

16
00:01:01,630 --> 00:01:01,990
names.

17
00:01:02,290 --> 00:01:07,810
So we actually put these with H and each of these is going to represent a column.

18
00:01:08,690 --> 00:01:10,130
So I can say column one.

19
00:01:10,730 --> 00:01:16,880
Then I'm going to create another T.H and we'll say this is column two.

20
00:01:18,420 --> 00:01:20,490
And then I'll create another T.H.

21
00:01:20,640 --> 00:01:22,950
And this will be column three.

22
00:01:23,550 --> 00:01:27,660
So you may be curious as to why you actually don't see any sort of grid.

23
00:01:28,140 --> 00:01:32,100
Well, by default, there's not actually going to be a border within this table.

24
00:01:32,520 --> 00:01:37,230
That's actually a really useful feature because sometimes you want to use tables to actually organize

25
00:01:37,230 --> 00:01:41,970
information on a particular way on your page, but you don't want it to look like a spreadsheet.

26
00:01:42,390 --> 00:01:49,830
Now, if you do want a border, that's going to be an attribute you define at the table level, so I

27
00:01:49,830 --> 00:01:50,370
can say.

28
00:01:51,290 --> 00:01:53,480
Border is equal to.

29
00:01:53,900 --> 00:01:56,180
And you notice, right when I say border is equal to.

30
00:01:56,210 --> 00:01:59,330
We can immediately see that border being created here.

31
00:01:59,720 --> 00:02:03,800
And depending on what number you provide, you can get like a thicker and thicker border.

32
00:02:04,160 --> 00:02:06,230
So I'm going to put a border of one.

33
00:02:07,100 --> 00:02:11,120
That way, we can actually see what happens as I start putting in table rows.

34
00:02:11,570 --> 00:02:12,750
So again, table head.

35
00:02:12,770 --> 00:02:13,820
These are your columns.

36
00:02:13,830 --> 00:02:19,460
And then inside the table head, you should have T-H elements that are going to be your actual column

37
00:02:19,460 --> 00:02:19,670
names.

38
00:02:19,670 --> 00:02:21,650
So call one column to call it three.

39
00:02:22,040 --> 00:02:26,090
Now what about inserting new rows for each row you want to insert?

40
00:02:26,120 --> 00:02:34,700
You say TR, which is a table row and notice that this is all going within the same set of table tags.

41
00:02:34,700 --> 00:02:36,980
That way, it's all associated with the same table.

42
00:02:37,660 --> 00:02:42,000
Now inside Table Row, I start putting in TED.

43
00:02:42,770 --> 00:02:47,900
And these are going to be your cells inside of the actual table.

44
00:02:48,350 --> 00:02:52,310
So then what I'm going to do here is, say and tree one.

45
00:02:54,230 --> 00:02:55,410
Or data point one.

46
00:02:55,430 --> 00:03:02,690
And you notice that it's actually defined by the order that you placed these in as far as which column

47
00:03:02,690 --> 00:03:03,500
they go into.

48
00:03:04,250 --> 00:03:05,450
So what's actually happening here?

49
00:03:05,750 --> 00:03:11,420
Well, you set up your table, then you set up your head and your head actually takes into account the

50
00:03:11,420 --> 00:03:15,560
order that you're passing in these columns in so column one column to column three.

51
00:03:16,010 --> 00:03:22,880
Then as you add in each new row, each animal is smart enough to remember the orders that are associated

52
00:03:22,880 --> 00:03:23,570
with the columns.

53
00:03:23,840 --> 00:03:29,780
So the very first cell that you put in is going to be associated with the very first column.

54
00:03:30,290 --> 00:03:34,520
Then the second item will be associated with the second column and so on.

55
00:03:34,880 --> 00:03:40,700
If you wanted nothing in the first column, for instance, you could just leave this blank and you notice

56
00:03:40,700 --> 00:03:42,020
that now it's blank.

57
00:03:42,440 --> 00:03:48,410
So typically you're going to have a TD per column that you have inside of your head.

58
00:03:48,530 --> 00:03:54,860
And if you wanted to put in a new row, you would just copy this TR and make a new row.

59
00:03:55,100 --> 00:03:57,260
So this is how you end up building tables.

60
00:03:57,530 --> 00:04:02,360
And again, if we just remove this border, you would still see it organized, but without the border.

61
00:04:03,080 --> 00:04:06,410
So that's the very basics of building out a table.

62
00:04:06,620 --> 00:04:08,630
So let's do a very quick review.

63
00:04:08,780 --> 00:04:13,250
There's a lot more going on here, but we're not going to be constructing tables too often within our

64
00:04:13,250 --> 00:04:13,910
web pages.

65
00:04:14,150 --> 00:04:15,560
But it is a very useful feature.

66
00:04:16,310 --> 00:04:20,480
So the first element tag you put in is define the table itself.

67
00:04:20,839 --> 00:04:24,200
Later on, we're going to discover there's actually a lot more attributes we can add to a table, but

68
00:04:24,200 --> 00:04:26,390
borders probably the key one to understand.

69
00:04:26,990 --> 00:04:29,450
Then you define the head of the table.

70
00:04:30,020 --> 00:04:32,900
Now question is, do you actually need to define ahead of the table?

71
00:04:33,260 --> 00:04:35,150
Technically, no, I could remove this.

72
00:04:35,750 --> 00:04:38,180
And you notice now it's just a table with rows.

73
00:04:38,810 --> 00:04:44,600
So how does actually each HTML distinguish between the heads and the rows?

74
00:04:44,900 --> 00:04:50,450
Well, you'll notice that if I paste this back in, it will automatically embolden the column names

75
00:04:50,450 --> 00:04:54,620
and become bold rather than just normal font in the data entry.

76
00:04:54,950 --> 00:04:59,300
You could always just kind of customize the font, whether it's bold, whether it's a different text

77
00:04:59,300 --> 00:05:05,690
size, etc. But that's how, by default, each HTML shows you the difference between the column names

78
00:05:05,690 --> 00:05:07,580
versus the rest of the rows.

79
00:05:08,480 --> 00:05:15,020
Then, for every single row you want to add in, you put in TR data row and then each cell item.

80
00:05:15,110 --> 00:05:18,560
And again, the order defines which column they're associated with.

81
00:05:19,100 --> 00:05:23,090
Now you can see here that as your tables get bigger and bigger, there's definitely a lot of HTML to

82
00:05:23,090 --> 00:05:23,660
type out.

83
00:05:23,930 --> 00:05:25,310
So later on, it'll be nice.

84
00:05:25,310 --> 00:05:29,540
That jingo will be able to automate a lot of this for us, and we'll actually be able to do things like

85
00:05:29,900 --> 00:05:33,500
put these rogue creations in part of a for loop.

86
00:05:33,590 --> 00:05:38,090
That way, the table can be automatically constructed for us based off what we have in a database.

87
00:05:38,450 --> 00:05:44,750
But right now, just remember the key text table to the find the Table T head to define the column names

88
00:05:44,990 --> 00:05:47,390
and then inside the T head you have T h.

89
00:05:47,840 --> 00:05:52,550
Then for each row you have TR and for each cell item inside those rows, you have to.

90
00:05:53,390 --> 00:05:54,260
OK, that's it.

91
00:05:54,410 --> 00:05:55,430
I'll see you at the next lecture.