0
1
00:00:00,090 --> 00:00:05,820
Now the other thing that I want to do with the website is, if we have a look at Thomas Cormen’s site, you
1

2
00:00:05,820 --> 00:00:12,450
can see that he's got his picture on the left and his name and his title and his blurb next to that
2

3
00:00:12,540 --> 00:00:13,320
image.
3

4
00:00:13,320 --> 00:00:14,950
And that's quite a nice layout.
4

5
00:00:15,090 --> 00:00:21,240
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
5

6
00:00:21,240 --> 00:00:22,260
to the image.
6

7
00:00:22,320 --> 00:00:30,990
Now because we haven't yet spoken about CSS and styling, if we wanted to only use pure HTML to affect
7

8
00:00:31,080 --> 00:00:36,120
how this part of our web site looks then we can use our tables to do that.
8

9
00:00:36,330 --> 00:00:41,100
So let's go up here where the body of our web sites begins.
9

10
00:00:41,100 --> 00:00:45,570
And let's add a table. Let’s add a table row.
10

11
00:00:45,990 --> 00:00:51,410
And inside this row it's only going to have two table cells or td elements.
11

12
00:00:53,610 --> 00:01:02,020
And the first td element is going to contain the image and the second td element is going to contain all of
12

13
00:01:02,020 --> 00:01:04,900
this up to the horizontal rule.
13

14
00:01:04,900 --> 00:01:08,470
So let's just cut it and paste it into here.
14

15
00:01:09,340 --> 00:01:15,940
Now we can hit save and let's refresh our page and you can see that we're getting close to this kind
15

16
00:01:15,940 --> 00:01:22,450
of structure where we've got a single table with only two columns and two cells,
16

17
00:01:22,540 --> 00:01:25,830
this being one cell and this being the other cell.
17

18
00:01:26,050 --> 00:01:30,240
And that allows us to get this kind of layout for our web site.
18

19
00:01:30,880 --> 00:01:36,970
Now you can see here that there's a little bit of a gap between the image and the text whereas on our
19

20
00:01:36,970 --> 00:01:40,900
site it's right up next to the image.
20

21
00:01:40,900 --> 00:01:49,100
Now if you wanted to increase that distance then you can achieve that by changing the table’s cell spacing.
21

22
00:01:49,300 --> 00:01:55,090
And if you have a look in the attributes you can see this attribute called cell spacing which defines
22

23
00:01:55,090 --> 00:02:00,400
the size of the space between two cells in a percentage value or pixels.
23

24
00:02:00,400 --> 00:02:03,590
So let's go ahead and add some spacing to our table.
24

25
00:02:03,610 --> 00:02:11,570
So inside our table element we're going to use cell spacing and let's set it to equal 20 and hit save
25

26
00:02:12,280 --> 00:02:14,470
and then let's go and have a look.
26

27
00:02:14,590 --> 00:02:15,030
Nice.
27

28
00:02:15,040 --> 00:02:16,630
That looks pretty good, right?