Howdy

How to create your own web site - Part 7

Brought to you by The Phoenix On-Line Foundation and Slippy...AKA...Ian

 

TABLES.. the Basics

Well it's time for us to get around the table and learn another very flexible and useful section of HTML. Yup!! In this part we are gonna make a start at learning TABLES.. (no not the type we struggled with at school!). A web site table is a number of "Cells" aranged in rows and columns. Each cell can contain images, links, text, lists, or just about anything else ya can dream up!. Tables are extreamly flexible, allowing to to define cell size, link cells together, add captions ets etc.. Some of the other less obvious uses are to add margins to a site.

So where do we start?...First of all lets set out a few definitions.
ROW - A single line of data that runs across the table.
COLUMN - A Vertical lineor section of data.
CELL - The intersection of a row & column. The place where you enter the data that appears in the table.
CAPTION - This is the text that appears at the top or bottom of the table.
HEADERS - The first row of the table. These are optional but many people use them to lable each column when presenting data.
BORDERS - These are the lines that surround each cell & the table.

So on to the meaty stuff...
Just like all the other html stuff, Tables have a start and finish tag.. <TABLE>, </TABLE> All the other table tags & definitions fit between these two tags. If you want a border around your table then use <TABLE BORDER="1">, </TABLE> instead.

The process is failry simple.. so heres are the 4 steps to setting up a table.
1) Add a row with the <TR>... </TR> tags
2) Divide the row up into the number of columns you want, by placing the correct number of <TD>..</TD> tags within the TR tags.
3) Insert data, or whatever between the TD tags
4) Repeat steps 1 - 3 for the number of rows you require.

Here's an example..
<TABLE>
<TR>
<TD> Row 1 column 1</TD>
<TD> Row 1 column 2</TD>
<TD> Row 1 column 3</TD>
</TR>

<TR>
<TD> Row 2 column 1</TD>
<TD> Row 2 column 2</TD>
<TD> Row 2 column 3</TD>
</TR>

<TR>
<TD> Row 3 column 1</TD>
<TD> Row 3 column 2</TD>
<TD> Row 3 column 3</TD>
</TR>
</TABLE>

This sets up a simple grid 3 wide by 3 down.. but remember each cell could hold an image, a link, text or what ever.. so dividing your page into a series of boxes, could give you far better control over how and where you present your page. If you are using a table to present stats or information, then you might want those headings.. here we use the <TH>...</TH> tags.

<TR>
<TH>First Column heading</TH>
<TH>Second Column heading</TH>
<TH>Third Column heading</TH>
</TR>

And how about a Caption for the table?
<CAPTION ALIGN=where>Your caption text goes here.</CAPTION> (where can be either TOP to put the caption at the top of the table, or BOTTOM to place it under the table.

The content of each cell can also be ALIGNED, with the cell. To do this you add the "ALIGN" extension to the TD or TH tag..
<TD ALIGN=LEFT> (you can use LEFT, CENTER, or RIGHT)
<TH ALIGN=CENTER> ....
That aligns things horizontally but you can also align vertically using VALIGN.
<TD VALIGN=BOTTOM> (you can use TOP, MIDDLE, or BOTTOM)
<TH VALIGN=MIDDLE> .....

Well all thats fine, but a series of boxes with stuff in them is hardly gonna inspire a second look at our homepage?.. so what now. Well things warm up a little when ya start joining cells together to make bigger units. creating a range of boxes on the page of different sizes. So now maybe you might have a larger image with a smaller one and text dispered around it?.. If you look at the source code on one of the pages you have already created with Angelfire, you may see that the different page layouts are possible because they use tables. So how do we go about this?.. Well you you use either COLSPAN (column span) or ROWSPAN as an atribute to the <TD>/ <TH> tags. and in using it you say how many columns or rows you want to span

Example:
<TD COLSPAN=2> This text will span across two columns </TD>
<TD> This text stays in just one column</TD>
<TD ROWSPAN=4> This text, image or whatever will span four rows</TD>
<TD ALIGN=CENTER ROWSPAN=3> The content of this cell will span 3 rows and be centered horizontally.</TD>

AND Theres MORE!!!!.... You can also set a different background color to the table. You know how to set the background to your whole page, but here you can set a different one that is just in your table. You do that as a part of the <TABLE> tag at the start of your table definition.

Example:
<TABLE BGCOLOR=color> where color is the color you require.
OR... why not set it as a background image instead?
<TABLE BACKGROUND="tablebg.gif"> where tablebg.gif is the file you wish as your background.

Well thats quite a lot to handle for today.. there are still a few extra fancy bits to do with tables, but I'm sure you can get the idea from this lot. Once again I suggest you make a new page and try it out. But you might find you will need to use a plain page without a predefined layout, or use the advanced editor. Confusion might ensue if you start defining a table within an existing table.

 

Have fun and once again, mail me if ya have trouble... always here to help.

 

 

Here are a few links that I thought might be useful to ya in all that wonderfull web building stuff you're up to. Its not the definative list by all means, but gives a wide range of sites where lots of stuff can be got.

 

HTML Reference Guides:

http://www.blooberry.com/indexdot/html/index.html
http://www.w3.org/markup/
https://www.mermeliz.com/html/index.htm

 

HTML Style Guides:

https://www.w3schools.com/css/
https://www.w3.org/Style/CSS/Overview.en.html

 

Buttons, Bars, Bullets  Icons:

http://www.ender-design.com/rg/

 

Background Textures:

https://www.creativebloq.com/design/free-background-textures-11121331

 

Sound & Video Sites:

http://www.dailywav.com/
https://www.wavsource.com/

 

| Part 6 | Part 8 | Home |