WEBVTT

0
00:00.030 --> 00:04.200
Now, the other thing that I want to do with the website is if we have a look at

1
00:04.200 --> 00:05.310
Thomas Cormen's site,

2
00:05.550 --> 00:10.550
you can see that he's got his picture on the left and his name and his title and

3
00:10.920 --> 00:14.730
his blurb next to that image. And that's quite a nice layout.

4
00:15.030 --> 00:16.530
So we can do that here as well.

5
00:16.530 --> 00:21.300
We're going to have our image on the left and all of this on the right, next to

6
00:21.300 --> 00:26.040
the image. Now, because we haven't yet spoken about CSS and styling,

7
00:26.640 --> 00:31.640
if we wanted to only use pure HTML to affect how this part of our website looks,

8
00:33.330 --> 00:35.820
then we can use our tables to do that.

9
00:36.240 --> 00:41.240
So let's go up here where the body of our website begins and let's add a table

10
00:43.350 --> 00:46.920
and let's add a table row. And inside this row,

11
00:46.920 --> 00:51.150
it's only going to have two table cells or td elements,

12
00:51.920 --> 00:52.753
<v 1>right?</v>

13
00:53.660 --> 00:57.260
<v 0>The first td element is going to contain the image.</v>

14
00:59.000 --> 01:03.830
And the second td element is going to contain all of this up to the horizontal

15
01:03.830 --> 01:07.490
rule. So let's just cut it and paste it into here.

16
01:09.230 --> 01:14.230
Now, we can hit save and let's refresh our page and you can see that we're

17
01:14.420 --> 01:16.670
getting close to this kind of structure,

18
01:17.300 --> 01:22.100
where we've got a single table with only two columns and two cells,

19
01:22.430 --> 01:25.460
this being one cell and this being the other cell.

20
01:25.970 --> 01:29.510
And that allows us to get this kind of layout for our website.

21
01:30.800 --> 01:35.210
Now, you can see here that there's a little bit of a gap between the image and

22
01:35.240 --> 01:37.310
the text, whereas on our site

23
01:37.460 --> 01:41.060
it's right up and next to the image. Now,

24
01:41.060 --> 01:43.520
if you wanted to increase that distance,

25
01:43.940 --> 01:48.380
then you can achieve that by changing the table's cell spacing.

26
01:49.010 --> 01:50.840
And if you have a look in the attributes,

27
01:50.990 --> 01:53.750
you can see this attribute called cell spacing

28
01:54.050 --> 01:59.050
which defines the size of the space between two cells in a percentage value or

29
01:59.150 --> 02:03.050
pixels. So let's go ahead and add some spacing to our table.

30
02:03.320 --> 02:05.270
So inside our table element,

31
02:05.360 --> 02:10.360
we're going to use cell spacing and lets set it to equal 20 and hit save. And

32
02:12.170 --> 02:16.280
then let's go and have a look. Nice. That looks pretty good, right?