1
00:00:00,000 --> 00:00:00,170

2
00:00:00,170 --> 00:00:02,740
>> SPEAKER 1: Suppose that you have some
tabular data that you'd like to layout

3
00:00:02,740 --> 00:00:05,470
in a web page in a table,
with rows and columns.

4
00:00:05,470 --> 00:00:06,540
How might we do this?

5
00:00:06,540 --> 00:00:10,480
>> Well, in advance here I've gotten
started with table.html, with some

6
00:00:10,480 --> 00:00:12,300
open tags and some closed tags.

7
00:00:12,300 --> 00:00:15,890
Inside of the body now, let's
include the table tag.

8
00:00:15,890 --> 00:00:19,300
And preemptively, just so I don't
forget, let's include the close table

9
00:00:19,300 --> 00:00:20,760
tag as well.

10
00:00:20,760 --> 00:00:24,830
Inside of that, let's specify
a table row with a tr tag.

11
00:00:24,830 --> 00:00:27,300
And, also preemptively, close that.

12
00:00:27,300 --> 00:00:31,550
>> Now inside of this row, let's define the
columns or the data that will be

13
00:00:31,550 --> 00:00:34,050
inside of those columns,
or the cells therein.

14
00:00:34,050 --> 00:00:37,470
To do this, let's use the
td tag for table data.

15
00:00:37,470 --> 00:00:39,730
Open bracket td close bracket.

16
00:00:39,730 --> 00:00:42,490
And now, how about we start simulating
a telephone's numbers.

17
00:00:42,490 --> 00:00:45,890
Let's start with one, and then
close this table data tag.

18
00:00:45,890 --> 00:00:47,840
Let's open a new one with 2.

19
00:00:47,840 --> 00:00:49,200
Close that one as well.

20
00:00:49,200 --> 00:00:50,270
And then a third.

21
00:00:50,270 --> 00:00:52,980
td 3 close td.

22
00:00:52,980 --> 00:00:54,000
>> Where am I going with this?

23
00:00:54,000 --> 00:00:57,840
Well, I claim that because we have a
table row, inside of which we have

24
00:00:57,840 --> 00:01:02,950
three table datas, we essentially have
the beginnings of a table that has one

25
00:01:02,950 --> 00:01:04,590
row and three columns.

26
00:01:04,590 --> 00:01:06,640
Let's now give it some
additional rows.

27
00:01:06,640 --> 00:01:11,300
>> Below the close tr tag, let's open
another tr tag, and preemptively close

28
00:01:11,300 --> 00:01:12,510
that one as well.

29
00:01:12,510 --> 00:01:21,600
Inside of that, let's now
do td 4, td 5, and td 6.

30
00:01:21,600 --> 00:01:23,470
Below that row, let's do a third.

31
00:01:23,470 --> 00:01:25,680
Open table row, close table row.

32
00:01:25,680 --> 00:01:34,970
Inside of that, td 7, td 8, and td 9.

33
00:01:34,970 --> 00:01:37,910
>> Lastly, just to make things interesting,
let's complete the bottom

34
00:01:37,910 --> 00:01:39,430
of this phone pad.

35
00:01:39,430 --> 00:01:42,530
Open tr and close tr.

36
00:01:42,530 --> 00:01:51,530
And inside of that, td star,
td 0, and td pound.

37
00:01:51,530 --> 00:01:54,090
Let's now save this file, change
its permissions, and

38
00:01:54,090 --> 00:01:56,440
view it with a browser.

39
00:01:56,440 --> 00:02:00,220
>> Chmod a+r table.html.

40
00:02:00,220 --> 00:02:02,300
Let's now open Chrome.

41
00:02:02,300 --> 00:02:08,430
http://localhost/table.html.

42
00:02:08,430 --> 00:02:11,610
And there we have what appears
to be an HTML table.

43
00:02:11,610 --> 00:02:13,920
It doesn't quite look like I expected.

44
00:02:13,920 --> 00:02:17,650
Let's at least add a border now around
all of those table cells.

45
00:02:17,650 --> 00:02:21,670
>> Let's go back to gedit and scroll
up to the table tag itself.

46
00:02:21,670 --> 00:02:25,130
And let's add an attribute, known as
"border," that specifies a numeric

47
00:02:25,130 --> 00:02:27,310
value for the width of a border.

48
00:02:27,310 --> 00:02:31,160
Border equals quote unquote 1,
where 1 denotes the width

49
00:02:31,160 --> 00:02:32,400
of the table's border.

50
00:02:32,400 --> 00:02:36,920
Let's save the file and reload
the page in my browser.

51
00:02:36,920 --> 00:02:38,920
>> Back in Chrome, reload.

52
00:02:38,920 --> 00:02:39,860
And there we have it.

53
00:02:39,860 --> 00:02:42,550
Very ugly, but nonetheless
tabular data.

54
00:02:42,550 --> 00:02:44,694