1
00:00:00,660 --> 00:00:04,430
So the next element I want to talk about is the HCM l table.

2
00:00:04,770 --> 00:00:12,110
So the table is how we create charts or tables like this one here on the Indian page for table.

3
00:00:12,480 --> 00:00:15,760
There's a table here you can see of a chart.

4
00:00:16,620 --> 00:00:22,190
There's another table here for colors and then here's a few examples of the types of things that we're

5
00:00:22,200 --> 00:00:23,090
going to work on.

6
00:00:23,340 --> 00:00:25,300
So these are tables in nature.

7
00:00:25,380 --> 00:00:26,560
They're pretty simple.

8
00:00:26,560 --> 00:00:31,470
Obviously they're not the most beautiful things without styling but they are very useful to display

9
00:00:31,470 --> 00:00:34,800
information in a tabular format.

10
00:00:34,800 --> 00:00:37,580
I'm going to go ahead and comment.

11
00:00:37,860 --> 00:00:47,870
A lot of this file out remember in sublime command slash and I'm going to put in a new table element

12
00:00:49,980 --> 00:00:54,420
and inside of every table and this is where it gets a little tricky because there's a few different

13
00:00:54,420 --> 00:00:55,550
ways of doing this.

14
00:00:55,560 --> 00:01:03,810
The first we're going to show you is we write a t r element which stands for table row and then inside

15
00:01:03,810 --> 00:01:08,590
of each table row you put a t d element.

16
00:01:08,790 --> 00:01:14,040
So I'm going to just write this out just to show you a pic first then we're going to come back and discuss

17
00:01:14,040 --> 00:01:14,490
it.

18
00:01:14,490 --> 00:01:20,550
So tiddy and we're just going to put some random text here so let's go back to colors red and orange

19
00:01:20,880 --> 00:01:23,670
and let's leave it at that.

20
00:01:23,700 --> 00:01:27,150
I refresh my page and I have a beautiful table.

21
00:01:27,150 --> 00:01:32,320
However I don't have any border on this table so it's hard to see what's happening.

22
00:01:32,460 --> 00:01:34,340
You would do this using CSSA.

23
00:01:34,350 --> 00:01:41,040
Ordinarily this is not a really great idea the way that I did it here with a border attribute.

24
00:01:41,160 --> 00:01:43,760
This is sort of the old way of doing it.

25
00:01:43,830 --> 00:01:51,150
This is how you could do it back in time for basically before things became more oriented around doing

26
00:01:51,180 --> 00:01:54,780
all your styling in your C Ss so you could still do it.

27
00:01:54,780 --> 00:01:56,960
I'm just going to add here just to show you what's happening.

28
00:01:57,120 --> 00:02:04,360
So what I've done is made a table that is one row and it has two elements to TDL instead of a row.

29
00:02:04,770 --> 00:02:09,210
So I can make another row and I'm going to make green

30
00:02:11,970 --> 00:02:12,600
and yellow

31
00:02:16,260 --> 00:02:20,070
and take a moment to just think about what this should look like when I refresh.

32
00:02:20,070 --> 00:02:25,070
We all have two rows now red and orange and yellow and green.

33
00:02:25,890 --> 00:02:32,990
So again we've got table we've got t r for each row and then a T D for each cell.

34
00:02:33,900 --> 00:02:35,300
So that's great.

35
00:02:35,310 --> 00:02:41,010
The next thing though that I want to show is how we could create a heading on the table so let's let's

36
00:02:41,010 --> 00:02:45,090
change our data a bit and let's make this table about people.

37
00:02:45,090 --> 00:02:55,920
So we'll have something like name and age and then below that we'll have you know name is or maybe this

38
00:02:55,920 --> 00:02:59,950
is dogs that rusty My dog has to watch it.

39
00:02:59,970 --> 00:03:04,130
My other dog who is 13 and so on.

40
00:03:04,260 --> 00:03:11,250
So to do this we want name and age to be part of a table kind of the bolded heading of the table.

41
00:03:11,250 --> 00:03:12,770
And so there's another element.

42
00:03:13,080 --> 00:03:20,380
We'll make another row and rather than Tweedy's we're going to use a tag called Th.

43
00:03:20,940 --> 00:03:23,820
So th's for a table head or table header.

44
00:03:24,370 --> 00:03:36,750
And we're going to have a name and age and then our first row will go ahead and fill out Rusty and his

45
00:03:36,750 --> 00:03:46,970
age is to then our next row will be Wyatt and his age 13.

46
00:03:47,610 --> 00:03:49,220
It's good for a dog.

47
00:03:49,590 --> 00:03:51,320
So I refresh the page.

48
00:03:51,540 --> 00:03:56,170
Oh well you can see my beautiful diagram this comment that out.

49
00:03:56,910 --> 00:03:58,240
And now here's my table.

50
00:03:58,470 --> 00:04:04,440
So I've got my th's in one row and then if I had another row with two elements and then another row

51
00:04:04,530 --> 00:04:06,070
with two elements.

52
00:04:06,150 --> 00:04:08,540
So one other thing we can discuss here.

53
00:04:08,850 --> 00:04:13,150
There is a slightly more complicated way to make the exact same table.

54
00:04:13,620 --> 00:04:19,590
And it's really more complicated it's just another tag or two that gives our table more meaning.

55
00:04:19,590 --> 00:04:25,900
So right now our heading information is two headers are just part of a regular TR.

56
00:04:26,100 --> 00:04:31,370
So there's no distinction between this TR And this TR They're both just table rows.

57
00:04:31,680 --> 00:04:38,040
Well initially of all five again the emphasis is on making each team out and having markup that is somewhat

58
00:04:38,040 --> 00:04:38,620
meaningful.

59
00:04:38,640 --> 00:04:43,860
So that if some other code is looking at this site and someone who is using a screen reader screen reader

60
00:04:43,860 --> 00:04:49,440
code can see my aged him HMO and read it and it will know the heading in it will know what the body

61
00:04:49,440 --> 00:04:55,350
of the table that might behave slightly differently than if it just reads all the roads out loud.

62
00:04:55,350 --> 00:05:04,830
So what we do there are two elements that we can add and there's a T head and a t body and these will

63
00:05:04,830 --> 00:05:08,670
not make a difference at all in the appearance.

64
00:05:08,860 --> 00:05:16,800
But I can do is just move the heading stuff everything that corresponds to this top part into a T head

65
00:05:16,820 --> 00:05:17,550
.

66
00:05:18,810 --> 00:05:24,270
And then what I'll do is move the actual body of the table all the content

67
00:05:27,060 --> 00:05:31,610
into the body so it looks identical nothing should change.

68
00:05:31,770 --> 00:05:36,930
And let's just do one other quick to change here so let's add another column so this will be name age

69
00:05:37,260 --> 00:05:38,870
and breed.

70
00:05:39,690 --> 00:05:46,320
So resti is a mutt and why it is a golden.

71
00:05:46,950 --> 00:05:47,610
There we go.

72
00:05:47,760 --> 00:05:50,340
So that's the basis of tables.

73
00:05:50,340 --> 00:05:52,470
Again they're not usually that ugly.

74
00:05:52,470 --> 00:05:57,450
We usually use C S S and so this is just a normal table without any styling.

75
00:05:57,450 --> 00:06:01,380
And then we'll go and see assess and change the fonts and add a border and background colors and all

76
00:06:01,380 --> 00:06:01,880
of that.

77
00:06:02,130 --> 00:06:02,930
Okay great.