All language subtitles for 021 Using HTML Tables for Layout.en_US

Now, the other thing that I want to do with the website is if we have a look at

Thomas Cormen's site,

you can see that he's got his picture on the left and his name and his title and

his blurb next to that image. And that's quite a nice layout.

So we can do that here as well.

We're going to have our image on the left and all of this on the right, next to

the image. Now, because we haven't yet spoken about CSS and styling,

if we wanted to only use pure HTML to affect how this part of our website looks,

then we can use our tables to do that.

So let's go up here where the body of our website begins and let's add a table

and let's add a table row. And inside this row,

it's only going to have two table cells or td elements,

right?

The first td element is going to contain the image.

And the second td element is going to contain all of this up to the horizontal

rule. So let's just cut it and paste it into here.

Now, we can hit save and let's refresh our page and you can see that we're

getting close to this kind of structure,

where we've got a single table with only two columns and two cells,

this being one cell and this being the other cell.

And that allows us to get this kind of layout for our website.

Now, you can see here that there's a little bit of a gap between the image and

the text, whereas on our site

it's right up and next to the image. Now,

if you wanted to increase that distance,

then you can achieve that by changing the table's cell spacing.

And if you have a look in the attributes,

you can see this attribute called cell spacing

which defines the size of the space between two cells in a percentage value or

pixels. So let's go ahead and add some spacing to our table.

So inside our table element,

we're going to use cell spacing and lets set it to equal 20 and hit save. And

then let's go and have a look. Nice. That looks pretty good, right?