>> SPEAKER 1: Suppose that you have some tabular data that you'd like to layout
in a web page in a table, with rows and columns.
How might we do this?
>> Well, in advance here I've gotten started with table.html, with some
open tags and some closed tags.
Inside of the body now, let's include the table tag.
And preemptively, just so I don't forget, let's include the close table
tag as well.
Inside of that, let's specify a table row with a tr tag.
And, also preemptively, close that.
>> Now inside of this row, let's define the columns or the data that will be
inside of those columns, or the cells therein.
To do this, let's use the td tag for table data.
Open bracket td close bracket.
And now, how about we start simulating a telephone's numbers.
Let's start with one, and then close this table data tag.
Let's open a new one with 2.
Close that one as well.
And then a third.
td 3 close td.
>> Where am I going with this?
Well, I claim that because we have a table row, inside of which we have
three table datas, we essentially have the beginnings of a table that has one
row and three columns.
Let's now give it some additional rows.
>> Below the close tr tag, let's open another tr tag, and preemptively close
that one as well.
Inside of that, let's now do td 4, td 5, and td 6.
Below that row, let's do a third.
Open table row, close table row.
Inside of that, td 7, td 8, and td 9.
>> Lastly, just to make things interesting, let's complete the bottom
of this phone pad.
Open tr and close tr.
And inside of that, td star, td 0, and td pound.
Let's now save this file, change its permissions, and
view it with a browser.
>> Chmod a+r table.html.
Let's now open Chrome.
http://localhost/table.html.
And there we have what appears to be an HTML table.
It doesn't quite look like I expected.
Let's at least add a border now around all of those table cells.
>> Let's go back to gedit and scroll up to the table tag itself.
And let's add an attribute, known as "border," that specifies a numeric
value for the width of a border.
Border equals quote unquote 1, where 1 denotes the width
of the table's border.
Let's save the file and reload the page in my browser.
>> Back in Chrome, reload.
And there we have it.
Very ugly, but nonetheless tabular data.