Introduction to web design

Introduction to Web Design
This tutorial is suitable for beginners in the field of web design. It includes:
Introduction - You are here.
HTML - An introduction to the computer language which forms the heart of web pages. Although it's
not absolutely necessary to know this stuff, you should still read this page to get an idea of how it works.
Editors - Tools you can use to help create websites.
Hosting - How to find a home (host server) for your website.
Publish! - How to upload your site to the internet so that other people can visit it.
Important Note: Before taking this tutorial or attempting to build a website, you must have a basic
understanding of the infrastructure which makes up the internet. You need to know what a server is,
how websites exist and how people access them. If you don't understand these things you should not
begin constructing your site! Instead you should take our short WWW Primer which explains it nice and
simply. Then return here and carry on...
The Cost of Creating a Website
At this point, many people will be wondering one thing: What will this cost? The good news is that, apart
from your normal internet connection fees, it is possible to build and operate a web site at absolutely no
cost. The bad news is that it's difficult to work like this and there are severe limitations to what you can
do without spending money. This tutorial will offer options for various budget levels as well as those
without any budget at all.
Methodology
Before we get down to business we should point out that there are two very different ways to make a
website.
The quickest and easiest way to make a site is to use an on-line "wizard" supplied by your internet
service provider (ISP) or some other organization.

To use this method, visit the internet address given to you by the organization providing the service.
There you will be guided through a series of simple steps which will result in a site being constructed for
you. The advantage of this method is that you don't need any skills other than using your browser. The
drawback is that you are very limited in what you can do with this kind of website.
The other approach is to construct a website on your own computer, then "upload" it to the internet
so that other people can access it. This is the way most serious sites are made, and it's the method that
this tutorial will cover.
Note: As the internet is such a complicated environment, these introductory tutorials tend to over-
simplify explanations of how things work. You shouldn't take all our examples and illustrations too
literally, but the information is conceptually sound. In time, you can choose to make the effort and build
up a more technically accurate understanding.
Getting Started
It can all look very intimidating for the beginner, but if you know how to surf the internet and use a
word processor then you should have no trouble making a website.
However, the single biggest mistake we see from beginners is trying to do too much too soon. Whatever
your level of experience with computers and the internet, it's absolutely critical that you take things
slowly and don't get ahead of yourself. Website construction is a minefield. If you have a map you'll be
fine, but if you think it looks easy and go charging in you'll end up coming apart!
Many software applications will tell you that web design is easy. It's common to see claims such as
"Make your own website in minutes -- no experience necessary!". In our opinion these claims are
misleading -- you simply can't learn enough in a few minutes to have any chance of success. You can
learn the basics in an hour or so, but you'll need a lot longer if you want to be any good.
People often ask us to recommend a computer program which will allow them to create fantastic
websites. They sometimes show us a website they like and say "I want a program that will make sites
like this." This scenario is somewhat like taking a photo of a house into a hardware shop and saying "I
want a hammer which will make a house like this".

So here's the first reality check: There is no such thing as a program which makes good sites. Although
some programs are more helpful than others, in the end it's up to you. Good websites aren't impressive
because they were made with a good program, they are impressive because they were made by an
experienced person. To make a great site you need to do a great deal of learning. There are no
shortcuts.
If you're still keen,
carry on to Step 2: HTML
At the heart of web page design is a computer language called "HTML". Although many new languages
and technologies are superseding HTML, it still forms the foundation of virtually all websites. For this
tutorial we will simplify the situation and pretend that all web pages use only HTML.
This is where you're probably thinking "Oh no, they don't expect me to learn about this do they?".
Well, yes and no. You don't actually need to know anything at all about HTML and if your ambitions
aren't high then you can get away without it. However, if you're even slightly serious about making a
good website then it will help you a lot if you understand a few basics. Don't be put off — it's not as
intimidating as it sounds.
If you really can't be bothered, there are other options available (at a cost — more on that later).
HTML Documents
A web page is an "HTML Document". This is a file format which usually uses the extension ".html" or
".htm". For example, if you use Microsoft Word, you will usually save your files with the extension
".doc". However you can also save your files with many other extensions such as ".txt", ".wps" etc.
Amongst the options is ".html".

HTML documents are actually just plain text, but contain snippets of code which carry vital information
about how the page should be displayed. You can create such a document using any text editor - even a
very simple one like Windows Notepad. In fact many web designers prefer to use simple text editors.
This is what a very simple HTML document looks like:
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
This is about as simple as a web page can get.
</body>
</html>
To view an HTML document, you must use a browser (or similar software). The browser opens the HTML
document in the background and "decodes" it before showing it to you. What you see is your browser's
interpretation of how the web page should look (note: this is actually an important point - it's why you
should test your site using a variety of browsers). To see what the above example document looks like,
click here, then click your browser's back button to return and continue.
We won't go into any more detail at the moment, but at the end of this tutorial we'll show you how to
learn more about HTML.
Move on to

Step 3: Editors
Step 3: WYSIWYG Editors
WYSIWYG means "What You See Is What You Get". WYSIWYG web-page editors are similar to word
processors and they allow you to construct a web page without using HTML instructions. You simply
type in your text, add pictures, etc, using familiar toolbars and menus. The editor makes the HTML code
in the background.
Dreamweaver screenshotSome well-known WYSIWYG web-page editors:
Adobe Dreamweaver
Microsoft FrontPage
Microsoft Publisher
The screenshot on the right is from Dreamweaver. Using the tools provided, you can add text, images
and other elements directly onto the page.
These editors have obvious advantages such as speed and ease of use. However, there is a trade-off:
They are not 100% reliable. If you examine the HTML code, you are likely to find mistakes and unwanted
extra code. They also tend to be deceptive - you may think you're producing a fantastic page but find
that it looks very different once you publish it. Remember that these editors usually use an
approximation of how the page will look. To see your page as it really is you need to view it in a browser.
For these (and other) reasons, some professional web designers refuse to use WYSIWYG editors.
Instead, they use simple text editors and compose all the HTML manually. However, it's becoming more
common to use a mixture of both methods. A good WYSIWYG editor will give you the option to edit the
HTML code manually. At the bottom of the Dreamweaver screenshot there is a panel which shows the
HTML code for the page being worked on. As you edit the page in WYSIWYG mode, the HTML
automatically updates. Likewise, you can edit the HTML code and the WYSIWYG view will be updated.
Recommendations

Finding the right software isn't easy. If possible you should try a number of different options - most good
editors have free trial versions available. Here's what we think about a few leading contenders:
Adobe Dreamweaver is our tool of choice. It is widely considered to be at least best equal in the field
of professional web design. It's also perfectly suitable for the novice. It's not cheap!
Adobe Contribute is a lower-cost sibling of Dreamweaver. It allows you to maintain and update your
website as well as collaborate with other people who work with you.
Microsoft Frontpage is a good program for beginners, but be warned: this program has a whole range
of flaws and does not have a good reputation in professional circles. Although it is a specialist web
development program and is much cheaper than many of it's competitors, there are free programs
available which offer essentially the same functionality without the hassles.
Ironically we use Frontpage quite a lot, because people often send us Frontpage files to work on (one
of the drawbacks - Frontpage websites often can't be edited with other programs). Believe it when we
say Frontpage causes far more than it's fair share of grief.
Microsoft Publisher was originally designed for print media but has evolved to include web design. It
has the advantage of being relatively cheap, versatile and familiar. Many people use it simply because
they already have it installed. However it is not a specialist HTML editor and doesn't perform well. We
don't recommend it.
Microsoft Word is similar to Publisher in that it was never originally designed for internet work.
Although it can read and edit HTML documents, it does so very badly indeed. If at all possible, avoid it
like the plague.
There are numerous free HTML editors available. Search the internet, visit web design newsgroups
and spend some time deciding.
Move on
to Step 4: Hosting
Step 4: Hosting

Once you've created your web site and you can see that it works properly on your computer, you need
to "publish" it to the internet so that other people can see it. Essentially you just need to copy the web
pages from your computer to your host server.
Naturally, the first thing you'll need to do is to find a host server. There are many options available and
finding the right solution isn't always easy. There are two main categories of hosting options: Free and
Paid.
Free Host Servers
There are plenty of places on the internet which will host your site for free. Not surprisingly, there are
catches. These may include:
Advertising banners. Most free services make their money by inserting advertisements into your
pages. The advertisements may also appear in pop-up windows which activate whenever someone visits
your site.
No domain hosting and ugly URLs. Free hosting doesn't usually allow you to use a domain name (eg
www.myname.com). You will instead be assigned an address which could be very long and difficult to
remember.
No support. If anything goes wrong or if you need any help, don't hold your breath. Chances are no-
one cares.
Limited features. You will find that certain features aren't allowed.
No guarantee of service. From time to time free hosts simply shut down, either temporarily or
permenantly. More often, certain features they offer are discontinued or they start charging for them.
Your best bet is to see what your ISP has to offer. Most ISP's have some sort of free web hosting option
with their dial-up accounts.
Paid Host Servers
If the free services don't meet your needs then you'll be looking for a professional hosting service. Prices
and features vary widly so shop around. Note that you don't have to use a host which is geographically
near you - you can have your site hosted on the other side of the world.

Look for the following features:
FTP Access. This is the most common method of publishing your files to the host server and is offered
on almost all serious hosting options. Make sure you know exactly how to access your host.
Technical Support. This is most important - does your provider offer help installing and running your
site? Does this cost extra?
E-Mail. Exactly what e-mail facilities are included? Can you have multiple email addresses?
Statistics. Most hosts provide free statistics to see how many people are visiting your site.
CGI, PHP, etc. These are advanced features which allow you to add bells and whistles such as forms,
dynamic content, discussion forums, etc. Not for the novice, but not so complicated that you can't learn.
Many hosts have ready-made CGI features which you can add to your site with minimal fuss, or they
may be able to add them for you.
Frontpage Extensions. If you insist on using Microsoft Frontpage, then you'll need Frontpage
extensions. This is a set of files and protocols which allow beginners to use advanced features simliar to
those offered by CGI. When used very carefully they can be a handy tool. However, Frontpage
extensions have many limitations and are prone to inexplicable failure - use them at your own risk!
Domain Name
If you want your own domain name (eg www.myname.com) then you'll need to apply to the appropriate
authority. This topic will be covered in a future tutorial.
Move on
to Step 5: Publish!
Step 5: Publish (upload)

The final stage of construction is the upload. Using a file transfer program, you copy the entire website
structure to the appropriate folder on the host server.
The window below is from the popular program WS_FTP LE, available from www.ipswitch.com.
FTP window
If you're familiar with file management systems such as MS Windows Explorer, then you won't have any
difficulty with this package. The left window displays the site on your local drive, the right window
displays the site on your host server. You simply guide the program to the appropriate folders and use
the left/right arrows to transfer selected files.
Some site authoring applications have the option to publish directly to the web. This may be largely
automated, such as the "Publish" command in Frontpage or the "Synchronise" command in
Dreamweaver. These commands can identify files which have been modified since you last published
and tell you which ones need to be updated. If you have a large site, this can be a huge time-saver.
That's the end of this tutorial. We hope it's been useful. From here, the best thing you can do is learn
more about HTML.
Hyperlinks
Hyperlinks are created with an "href" tag (hyperlink reference). In it's simplest form the tag looks like
this:

<a href="page1.html">Go To Page 1</a>
In this example, the text "Go To Page 1" becomes a hyperlink to a page called "page1.html". The link
looks like this:
Go To Page 1
There are two distinct types of hyperlink: "absolute" and "relative". Absolute links are quite simple, but
relative links take a bit of getting used to. Relative links are actually divided into two further categories:
"document-relative" and "site-root-relative".
Absolute Links
An absolute link (or "absolute URL link") contains a complete internet address, just the same as if you
typed the address into your browser's address bar. It doesn't matter where the source page is in relation
to the destination page, the link will always work as long as the destination page exists. Most absolute
links begin with "http://" and follow this simple format:
<a href="http://www.mysite.com/index.html">Go To My Site</a>
Document-Relative Links
Document-relative links use directions from the source page to the destination page, sort of like saying
"Start here then follow this path until you reach the destination".
Directory TreeThere are three ways to do this - the method you use will depend on the location of the
source and destination pages in relation to each other. We will use the example on the right and create
hyperlinks from the page called sourcepage.html to other pages in the site.
(1) If the destination page is in the same directory as the source page
All you need to specify is the source file name:

(2) If the destination page is in a folder inside the source page's folder
Specify the folder name and then the file name:
<a href="directory2/page2.html">Go To Page 2</a>
(3) If the destination page is in a folder outside the source page's folder
Use the special instruction ../ which signifies "one directory higher".
The following link means "Go up one directory level, then go to a folder called directory3, then to a file
called page3.html":
<a href="../directory3/page3.html">Go To Page 3</a>
You can repeat the ../ to make the link more than one level higher, for example, "Go up two levels, to a
file called index.html":
<a href="../../index.html">Go To The Index Page</a>
Important Note: For relative links to work, you must keep the file structure intact. For example, if you
moved the sourcepage.html file down into the directory2 folder, the relative links would no longer work.
In this case you would need to add another ../ to point the links to the correct level. For example:
<a href="../../../index.html">Go To The Index Page</a>
Site-Root-Relative Links

Site-root-relative links use a single forward-slash / to signify the instruction: "Start at the document root
of the site and go down the directory path from there." The format is:
<a href="/main-directory/directory4/page4.html">Go To Page 4</a>
Despite the cumbersome name, this method is quite simple. The link begins at the same level as your
domain and works down from there. The link above is the same as:
<a href="http://www.mysite.com/main-directory/directory4/page4.html">Go To Page 4</a>
This method has the significant advantage of staying intact if you move the source page. The exact same
link will work from any page anywhere in the site.
Notes:
This method will not work on files on your own hard drive unless you run them through a personal
web server. However once you upload the pages to your server they will work.
If your site does not have it's own domain name, this method is likely to cause problems. Consult your
hosting provider for more information.
Targets
You can specify a target window or frame for a hyperlink. This is where the linked page will open. If no
target is specified, the link will open in the same window/frame. The format is this (where the target is
"self"):
<a href="page1.html" target="_self">Go To Page 1</a>

The target window options are:
_self : Opens in the same window and same frame.
_top : Opens in the same window, taking the full window if there is more than one frame.
_parent : Opens in the parent frame.
_blank : Opens in a new window.
If you have a frameset defined, you can set your target as any particular frame. For example, if you have
a navigation frame called"nav" and a main frame called "main", set the target of your navigation links
like so:
<a href="page1.html" target="main">Go To Page 1</a>
...etc.
Note: Instead of specifying a target for each individual link, you can define a "base target" for an entire
frame or page. This means that every link on the page will use the base target by default. Place the base
target tag in the page's head. Example:
<base target="_blank">
Link to a Specific Part of a Page (Internal Hyperlink)
An internal hyperlink is a link which points to a particular part of a page. This can be useful in long pages
with lots of sub-sections. For example, the links at the top of this page are internal links pointing to each
sub-heading.
Internal hyperlinks require an anchor tag with the "name" attribute like so:

<a name="part2">Part 2</a>
Create an anchor like this at the place in the page you want to link to. It doesn't matter if there is
anything between the open and close tags.
Then create a hyperlink which refers to this anchor with a hash (#) like so:
<a href="#part2">Go To Part 2</a>
This assumes that the name anchor is on the same page as the hyperlink. To link to an anchor on a
separate destination page, simply create a normal link with the anchor name appended to the file name
like so:
<a href="page1.html#part2">Go To Page 1, Part 2</a>
Notes:
Browsers treat internal links exactly the same way as normal links, i.e. as if they were a separate page.
This can result in some confusion with back and forward buttons.
If an internal hyperlink on the same page doesn't work, try including the page's file name in the
hyperlink (as if you were linking to a separate page).
Sometimes internal hyperlinks don't work in pages on your hard drive unless you are running a
personal web server. They will work when you upload them to your site.
E-Mail Links (mailto)
E-Mail links, otherwise known as a "mailto" links, use the following format:

<a href="mailto:myname@mysite.com">Click Here to Email Me</a>
This type of link is a special case, completely different to those described above. Instead of linking to a
place on the internet, clicking this link causes the user's computer to open it's default email program
(e.g. Outlook Express, Eudora, etc) and prepare a blank email to the specified address. The user then
enters their message and sends the email in the normal way.
If you want to be tricky, you can add a "subject" attribute to the link. This will automatically insert the
specified subject line into the email:
<a href="mailto:myname@mysite.com?subject=Inquiry From Website">Click Here to Email Me</a>
Notes:
The subject attribute doesn't work in all browser/email programs. Those programs which don't
support it will probably just ignore it, but there are no guarantees that it won't cause an error. Use at
your own risk.
Be aware that using mailto links on your website is an open invitation to spam. Malicious programs
called "email harvesters" troll the internet looking for these links - when they find yours they will add it
to a database for spammers. This is why we recommend using a contact form rather than a mailto link
wherever possible.
Hyperlinks
this:
looks like this:

Go To Page 1
Absolute Links

called page3.html":

Notes:
Targets
"self"):

like so:
...etc.
sub-heading.

like so:
Notes:

Notes:
your own risk.
wherever possible.
Hyperlinks
this:
looks like this:
Go To Page 1

Absolute Links

called page3.html":

Notes:
Targets
"self"):

like so:
...etc.
sub-heading.

like so:
Notes:

Notes:
your own risk.
wherever possible.
The HTML Image Tag
The image tag is used to place an image on the web page. In its most simple form it looks like this:
<img src="image1.jpg">
HTML and Image File
The Basics - How it Works
It is very important to understand that images are not technically "part" of the web page file, they are
separate files which are inserted into the page when it is viewed by a browser. So a simple web page
with one image is actually two files - the HTML file and the image file. The example on the right
illustrates this.

In this example the two files are both located in the same folder. The HTML file includes an image tag
which refers to image1.jpg.
When the HTML file is displayed in a browser, it requests the image file and places it on the page where
the tag appears.
As you can see, the most important attribute of the image tag is src, which means source and tells the
browser where the image file is.
Size Attributes
The size attributes define the width and height of the image. They look like this:
<img src="image.jpg" width="200" height="150">
These attributes are optional but strongly recommended as they help the browser arrange the page
more quickly.
Resizing the Image
If the size attributes are set to different values than the original image size, the browser will resize the
image to the specified size (this doesn't affect the image file itself, just the way it's displayed in the
page). This is a bad idea - the browser will not do a very good job of resizing and there are other
complications. In general you should always match the size attributes to the actual size of the image file.
If you don't know the image file size, try either of these methods:
Import the image into any graphics program and select "Image Size" from the menu. This will tell you
the height and width.
Open the image file in a browser, right-click the image, then select "Properties". This will tell you the
width and height.

If the image file is the wrong size for your needs, you need to resize it properly using a graphics program.
See How to Resize an Image.
Examples
The examples below show how the same 200x150 pixel image is displayed with different size attributes.
The size attributes match the original image size, so the image is displayed correctly
The height attribute is correct but the width attribute is less than the image width, making the image
appear to be squashed sideways.
The size attributes are both less than the image dimensions. In this case the displayed image is still in
proportion, but may appear to be lower quality due to the browser's imperfect efforts to resize it. Also,
the image file is larger than it needs to be.
The size attributes are both greater than the image dimensions. Again, the displayed image is in
proportion but the quality is poor.
Alt & Title Tags
Photo of Mr and Mrs OwenThese two tags are very similar and can be confusing. Basically, it makes
sense to treat them as the same thing and use them both.
They define a short piece of text which appears instead of the image if the image cannot be displayed
(for whatever reason), and/or as a "tool-tip" when you hold your mouse over the image.

If both attributes are specified, the title tag will override the alt tag. Hold your mouse over this image to
see which tag your browser displays.
<img src="image.jpg" alt="Photo of Mr and Mrs Owen" title="Mr and Mrs Owen">
If no alt or title tag is specified, the results vary depending on the browser and user settings. Some will
show nothing, some will show the file name.
Spacing Attributes
You can create space between the image and surrounding text by defining vertical and horizontal space
like so:
<img src="image.jpg" vspace="5" hspace="10">
Alignment
You can use the align attribute to position the image:
<img src="image.jpg"align="left">
The following alignment options are available:
left, right, top, middle, bottom, absmiddle, absbottom, baseline, texttop
Note: These options are not particularly intuitive, that is, you may be surprised at how they actually
function. We recommend that you experiment with these standard options and learn exactly how they
work. Unfortunately image alignment is somewhat limited in standard HTML. For accurate placement
you may need to use more advanced methods than we are covering here.
Border Size

The border attribute places a border around the image. In the following example a 1-pixel border is
applied:
<img src="image.jpg" border="1">
If no border attribute is specified, no border is applied, except when the image is used as a hyperlink. In
this case a 1-pixel border is applied. If you want to make an image into a hyperlink without a border,
specify a zero border like so:
<img src="image.jpg" border="0">
HTML Tables
Tables are a way to arrange content on a web page. In the early days of the internet, tables were the
only practical way to achieve any sort of advanced page layout. With the advent of CSS, tables have
become less favoured. However they are still the preferred way to present certain types of information.
Whether or not you use tables for layout, they are an important part of web design and you need to
know how they work. The HTML code for tables can be quite confusing at first but don't be put off - with
a little practice it becomes quite easy.
The Basics
The most simple table HTML code looks like this... ... and creates this:
<table>
<tr><td>Content goes here</td></tr>
</table> =
Content goes here

As you can see, there are several components which make up a table. Before we explain them, we'll add
a common table attribute - the border. This will make it easier to see what's happening. We'll tweak the
look of the border later.
<table border="1">
<tr><td>Content goes here</td></tr>
</table> =
Content goes here
Now let's break it down. There are three critical tags which make up any table:
<table> </table> Defines the beginning and end of the table.
<tr> </tr> Table Row - Defines the beginning and end of a horizontal row.
<td> </td> Table Cell - Defines an individual cell. Cells are always placed inside a row.
A table must have at least one row and one cell. In theory there is no upper limit to the number of rows
and cells - you just need to be realistic about the size of the table on your page.
To add more cells, simply add more <td> tags. The example below has one row, 2 cells.
<Table border="1">
<tr><td>Cell 1</td><td>Cell 2</td></tr>
</table> =
Cell 1 Cell 2
To add more rows, add more <tr> tags with their respective cells. The example below has two rows,
each containing one cell.
<Table border="1">
<tr><td>Row 1</td></tr>

<tr><td>Row 2</td></tr>
</table> =
Row 1
Row 2
Using the same system you can add rows and cells to your heart's content:
<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
</table> =
1-1 1-2 1-3
2-1 2-2 2-3
3-1 3-2 3-3
Rowspan & Colspan
The examples above work fine as long as each row contains the same number of cells. The complications
start when rows or columns have different numbers of cells. (Note: Although there is no HTML tag for
columns, vertical lines of cells are referred to as columns.)
In order to have different numbers of cells you must force a cell to spread out across two or more rows
or columns, using the following cell attributes:
colspan - The number of columns the cell spans
rowspan - The number of rows the cell spans
These attributes are shown in the following examples:

<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td colspan="2">2-1</td></tr>
</table> =
1-1 1-2
2-1
<table border="1">
<tr><td>1-1</td><td rowspan="3">1-2</td></tr>
<tr><td>2-1</td></tr>
<tr><td>3-1</td></tr>
</table>
=
1-1 1-2
2-1
3-1
This brings us to an important limitation. Cells can only span whole numbers of rows or columns, i.e.
cells can't span half a row or part of a column. In fact tables have many such limitations which is partly
why they are not the best method for general page layout. However they are very good for content
which fits into normal rows and columns.
Note: If your table has an invalid number of cells, for example, 2 cells in the first row and 3 cells in the
second row (with no colspan to compensate), the results will be unpredictable and probably very ugly.
If you've made it this far you've done well. The good news is that we've covered all the difficult things
about tables. From here on it's all about tweaking and making the table look neater.

Width and Height
The size of a table can be defined in two ways - as a fixed pixel value or as a percentage. If no
percentage sign is used then the value is taken to mean pixels. The following examples are fairly self-
explanatory.
<table width="90%">
<table width="640" height="300">
The same system can be used for individual cells, e.g. <td width="90%">Content</td>
Notes:
Although the height attribute is widely supported, it isn't actually part of the official HTML standard. It
may not always work as you expect.
If no size values are specified, the browser will decide on an appropriate size. Results will vary
between browsers.
If a table width is wider than the browser window, the page will not fit on the screen and horizontal
scroll bars will appear.
The percentage value applies to whatever "container" the table is in, meaning that if the table is
nested inside another table or page element, the width will be a percentage of the containing cell or
element. If there is no containing element, the table width will be a percentage of the page width.
Spacing and Padding
There are two ways to set the spacing around cells.
cellspacing - Defines the space between cells. If a border is used, the spacing will widen the border.

cellpadding - Defines the space inside each cell, i.e. the space between the edges of the cell and the
content within it.
Here are a few examples:
<table border="1" cellpadding="1" cellspacing="0">
<tr><td>1-1</td><td>1-2</td></tr>
</table> =
1-1 1-2
2-1
<tr><td>1-1</td><td>1-2</td></tr>
</table> =
1-1 1-2
2-1
<tr><td>1-1</td><td>1-2</td></tr>
</table>
=
1-1 1-2
2-1
Note: These attributes apply to the entire table - you can't specify spacing or padding for individual cells.

Introduction to web design

More Related Content

What's hot (20)

Similar to Introduction to web design (20)

More from Fitra Sani (16)

Recently uploaded (20)

Introduction to web design