<!--7 Tables-->

Tables, although you might not realise it yet, have got many uses in web pages. Not only can they help to present information, they can also help to lay out a web-page. I told you in an earlier chapter about Microsoft Publisher and that it converts graphical designs into HTML code, the way in which it does this is that it presesents it’s pages as a table, and each part of the page, be it text an image or something else is presented in it’s own cell.

Most people will be familiar with the idea of presenting information using tables so I will firstly discuss how this is done in a HTML document.

let’s get started

The start tag of a table is very simply <table> and the end tag is </table>, no surprises there. To start a new row type <tr> and to signal the end of a row type </tr>. To enter information in a cell, start with the <td> tag and finish with the </td> tag. To add a title to your table, start with the <caption> tag and end with the </caption> tag. To insert headings in a table, start with <th> and end with </th>.

These are the very basics and no attributes have been mentioned at all yet. Before I tell you about the attributes just take a look at the preceeding notepad viewer and explorer view. They will hopefully help you understand what you have learned so far about tables.

I will actually tell you one attribute of the table tag before we get started and that is "border". If this is specified then the table will have a border. That’s it.

Explorer View 7.1 - click on the image to see a bigger and clearer version

Concentrate now because there are a lot of attributes coming up

attributes of the <table> tag

I will firstly show you a full <table> tag which uses all of its’ attributes and then I will explain each one of them.

<table border=5 bordercolor=blue align=center width=50% height=123 cellpadding=3 cellspacing=5 bgcolor=yellow background=bg.gif>

border= I mentioned earlier that you can make your table have a border by adding the border attribute. I did not however tell you that you could specify its’ size in pixels. Simply enter the amount of pixels wide you want it to be after the equal sign.

bordercolor= specifies the colour of the border using either their rgb value or one of the set ones.

align= can be set to left, right or center and specifies where the table will appear on the browser window.

width= can be set in pixels or as a percentage of the browser window.

height= can be set in pixels or as a percentage of the browser window.

cellpadding= set in pixels. Specifies the space within each cell in which nothing will appear.

cellspacing= set in pixels, specifies the amount of blank space in between each cell

bgcolor= sets the background colour of the table, once again use either the rgb value of the colour or one of the set colours.

background= sets a background image

attributes of the <caption> tag

There is one and this is it.

<caption align=top or bottom>

attributes of the <tr> tag

I will do the same as last time, show you first and then explain.

<tr align=right valign=bottom bgcolor=blue bordercolor=yelow background=bg.gif>

align= can be set to left, right or center. Specifies the alignment of text in each cell of that row

valign= can be set to top, bottom or center. Specifies the vertical alignment of text in each cell of that row

bgcolor= the same as the bgcolor attribute of the <table> tag except that this sets only the colour for that row

bordercolor= the same as the bordercolor attribute of the <table> tag except that this sets only the colour for that row

background= sets a background image

attributes of the <th> and <td> tags

Both of these tags have the same attributes. I will show you a <td> tag with all of the attributes set and then explain each one.

<td align=right valign=top bgcolor=green bordercolor=black height=50 width=100 colspan=2 rowspan=3 background=bg.gif>

align= is the same as the attribute in the <tr> tag except that it effects only that cell

valign= is the same as the attribute in the <tr> tag except that it effects only that cell

bgcolor= is the same as the attribute in the <tr> cell except that it effects only that cell

bordercolor= is the same as the attribute in the <tr> tag except that it effects only that cell

height= is set in pixels and sets the height of the cell

width= is set in pixels and sets the width of the cell

colspan= is set to a number and sets the number of columns that cell will span

rowspan= is set to a number and sets the number of rows that that cell will span.

background= sets a background image

I will now go into more detail about the height and width and the colspan and rowspan attributes because these can get complicated.

width and height

Firstly I will just point out that if a width or height is set in a cell then the cells on the same row are effected by the height attribute and all the cells on the same column are effected by the width attribute. This is not very complicated but the complication arises when two different heights are specified on the same row or when two different widths are specified in the same column. What will happen? Well, if two different widths are specified on the same column the larger one takes control. The text however in the cell with the smaller width set, will wrap at the point where the width is set. If two different heights are specified on the same row then the larger one is presented but the smaller one still takes effect in its’ cell.

colspan and rowspan

Colspan and rowspan are used when you want to create a table that looks something like this:

This could definitely get complicated. The trick is to firstly draw out on paper the table you want to create. Then start at the top and work to the right and down.

I will use the sketch on the last page as an example of how exactly this is done. We will say that this table has a total of 6 rows and 4 columns.

<table>

<tr>

Row 1: cell 1 has a colspan of 2 and a rowspan of 1

Cell 2 has a colspan of 2 and a rowspan of 2

<td colspan=2></td><td colspan=2 rowspan=2></td>

</tr>

<tr>

Row 2: cell 1has a colspan of 2 and a rowspan of 1

That is all that is on row 2 because the rest of the space that appears to be on that row is being used for row 1

<td colspan=2></td>

</tr>

<tr>

Row 3: cell 1 has a colspan of 2 and a rowspan of 1

Cell 2 has a colspan of 1 and a rowspan of 4

Cell 3 has a colspan of 1 and a rowspan of 4

<td colspan=2></td><td rowspan=4></td><td rowspan=4></td>

</tr>

<tr>

row 4: cell 1 has a colspan of 1 and a rowspan of 3

cell 2 has a colspan of 1 and a rowspan of 1

<td rowspan=3></td><td></td>

</tr>

<tr>

row 5: cell 1 has a colspan of 1 and a rowspan of 2

<td rowspan=2>

</tr>

<tr>

row 6: cell 1 has a colspan of 1 and a rowspan of 2

<td></td>

</table>

Before I show you the full listing and then the result I want to tell you about &nbsp. If this is entered as the text for a cell then the cell will be displayed empty. You might say why not just leave it blank? If you leave the space blank then the cell will not appear correctly. Internet Explorer 4 will not present it at all and Internet Explorer 3 will present as a pushed up button. If you do not know what I mean by this then it does not matter just as long as you realise that it is important to use &nbsp.

Explorer View 7.2 - click on the image for a bigger and clearer version

who wins?

You will have noticed that some attributes can be set in more than one place. You may be wondering which have power over others. This is how it works. Attributes in the <table> tag influence the whole table but their settings can be overwritten by attributes in the <tr> tag which can in turn be overpowered by attributes in the <th> or <td> tags.

I will now provide a Notepad Viewer and resulting Explorer View concerning the alignment of text in a table. It will also display the use of the color attribute in two places so as you can see the way in which one overpowers the other. Most of the other attributes are also used.

Explorer View 7.3 - click on the image for a bigger and clearer version

more than text

So far I have spoken only of inserting text into HTML tables. Although this text can be formatted it would be a lot better if we could add more than text to our tables. Don’t you agree? Well we can. We can add anything we want to a table simply by enclosing its’ code within the <td> and </td> tags. We will speak however about inserting lists, images and other tables.

Firstly I will demonstrate how to use images in a table. It really is quite easy. This is what you type:
<td>
<img src="image.gif">
</td>

Lists are inserted much the same way:
<td>
<ul>
<li>blah
<li>blah
<li>blah
<li>blah
</ul>
</td>

And so are tables:
<td>
<tableb> <tr>
<th>blabh</th><th>blah</th><th>blah</th>
</tr>
<tr>
<td>blah</td><td>blah</td><td>blah</td>
<tr>
<th>blah</th><th>blah</th><th>blah</th>
</tr>
</table>

I will now explain what I did above.

I started off with a normal <table> tag and finished with the </table> tag just as I would if the table was regular. Each row started with the <tr> tag and ended with the </tr> tag, each cell started with the <td> or <th> tag and ended with the </td> or </td> tag. Everything is normal so far.

Where the differences arise is within each cell. Instead of just typing normal text I used other tags such as <img> and <ul> along with their attributes so as the images, lists etc. would become part of the table. I then included all relevant information for the list and the table within the start and end tags. Then when I was finished I just ended that cell and started a new one.

This is how the table is presented in Internet Explorer 4.

Explorer View 7.4 - click on the image to see a bigger and clearer version

Notice that I used no borders because I wanted to use the table as a layout tool and not as a regular table

using the <pre> tag instead

If presentation is not as important to you as everyone getting to see your table, including those with browsers that do not support tables, then you could use the <pre> tag instead.

Notepad Viewer 7.5 - click on the image for a bigger and clearer version

Once again just like earlier in the book I had to use a picture of notepad instead of just a listing because the text of a <pre> tag only presents properly in the listing if it is written in a font that gives equal space to each character.

Explorer View 7.5 - click on the image for a bigger and clearer version

As you can see the table is not presented as well as with the <table> tag but it will be visible on all browsers, even text only.

next lesson    home    comment    more downloads    download this

HTML Builder- End of lesson 5

You will need one more image to complete the html builder x.gif. If you have downloaded this tutorial then you already have the file, if you haven't then you will have to download it now. Right-click on the link and choose "save target as..." or "save link as...", whichever appears (it will depend on your browser). Save the picture in the same folder as your html builder file.

Notepad Viewer – HTML Builder 5

<html> <head> <title> I have now completed Lesson

5

</title> </head> <body topmargin=20 leftmargin=15 text=fuchsia link=navy vlink=blue alink=green background="nonexistent.jpg" bgcolor=aqua bgproperties=fixed> <basefont face="lucida casual","arial" size=3 color=fuchsia> <h1 align=center>HTML BUILDER</h1> <hr size=3 color=lime width=75% align=center>

<table cellspacing=10 width=100% > <tr> <td background="x.gif" width=60> </td> <td>

<OL type=I> <lh><big><b>What I learned from....</big><b><br> <li>Lesson 1 <ul type=circle> <li>start and end HTML tags <li>head tag <li>meta tag <li>title tag <li>body tag <li>margins <li>hidden text </ul> <li>Lesson 2 <ul type=circle> <li>blockquote <li>background colour or image <li>all attributes of the body tag <li>basefont and font tags <li>paragraphs and line breaks <li>physical formatting <li>preformatted text </ul> <li>Lesson 3 <ul type=circle> <li>inserting images <li>aligning text with images <li>all attributes of the img tag </ul> <li>Lesson 4 <ul type=circle> <li>ordered lists <li>unordered lists <li>definition lists <li>all attributes of these lists <li>lists within lists <li>personalising your lists using your own bullet </ul>

<li>Lesson 5 <ul type=circle> <li>creating tables <li><i>all</i> attributes of the tags in a table <li>inserting tables within tables <li>inserting other HTML items within tables <li>using the pre tag instead of a table </ul> </ol> </td> </tr> </table>

<hr size=3 color=lime width=75% align=left> <h2>This is what I have learned from lesson 1.</h2><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40> <hr size=3 width=75% color=lime align=left> I know the very basics of writing HTML. I know that the start and end HTML tags are necessary in a HTML document. I know that the meta tag is used to give information to search engines, i.e. keywords and description<p> I am able to assign a title to my documents (see taskbar above).<br> I know that all text and images etc. are to be included between the start and end body tags. I know two attributes of the start body tag, topmargin and leftmargin and I know that each of these is measured in pixels. I know how to insert hidden text in a HTML document for example there is hidden <!--this text is hidden so you cannot see it on the webpage--> text in between the words hidden and text in this sentence. <hr size=3 width=75% color=lime align=left> <h2>This is what I have learned from lesson 2</h2><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40> <hr size=3 width=75% color=lime align=left> Most of what I learned in lesson two was about changing the look of my webpage. I have already made some changes to this page and I will tell you what they are in an indented paragraph. <blockquote>As you can see I have added a background colour to the page and if I want I know how to add a tiled image. I have set all of the attributes in the body tag, most of them concern the colour of different text. I have added paragraphs and line breaks to the text. I have set the basefont tag and <font face="flexure","times new roman" size=+1 color=black>know how to use the font tag </font>.I have added horizontal lines and I have added headings. I have also added paragraphs and line breaks.</blockquote> <pre> I am able to --------------------- use preformatted text to make it appear in the order I want it to </pre> <p>I can format my text so as it is<br> <b>bold</bold><br> <i>in italics</i><br> <u>underlined</u><br> <tt>tele-type</tt><br> <strike>strike-through</strike><br> <sup>superscript</sup>, <sub>subscript</sub><br> <small>small</small><br> <big>big</big><br> <b><u><i>or</i></b><sup><big> a</u></sup><tt><strike> combination</big></tt></strike></u> <hr size=3 width=75% color=lime align=left> <h2>This is what I have learned from lesson 3</h2><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40> <hr size=3 width=75% color=lime align=left> This lesson was based on one chapter and the central topic was inserting images in HTML documents.<p> I have already inserted .gif files on my page and now I will now show you some other things I know how to do with images.<p> <img src="picture.gif" align=left height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10> This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom. This text is beside a left aligned image and will wrap when it gets to the bottom.<p> This is only one line of text and appears center aligned <img src="picture.gif" align=center height=128 width=128 alt="this is text written in the alt attribute" vspace=10 hspace=10><p> I know how to resize images using the width and height attributes. e.g.<img src="picture.gif" align=center height=60 width=160 alt="this is text written in the alt attribute" vspace=10 hspace=10> <p>I understand all the attributes of the img tag and they have all been used for the images above. <hr size=3 width=75% color=lime align=left> <h2>This is what I have learned from lesson 4</h2><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40> <hr size=3 width=75% color=lime align=left> This lesson was again based solely on one chapter. The Chapter concerned lists. I learned about ordered or numbered lists, unordered or bulleted lists and definition lists. I learned the different attributes of each of these, the main one being type. I learned how to insert lists within lists. I also learned about extra indentation and personalising unordered lists. <p>I have now added a list of contents at the top of this page and when I learn more advanced things about HTML this list will appear in a different frame and will contain links to the different sections.

<hr size=3 width=75% color=lime align=left> <h2>This is what I have learned from lesson 5</h2><img src="talk.gif" height=80 width=80 alt="talking man" hspace=40> <hr size=3 width=75% color=lime align=left> Lesson 5 was all about inserting tables in my HTML document. I learned that they can be used both for presenting information and as a layout tool.<p> They can be used as a layout tool because it is now possible to include other HTML elements in them such as lists and images.<p> I am now familiar with all of the attributes of the tags in a table. They include such things as border thickness and colour, background colour or tiled images and text alignment.<p> You will see at the top of the page that I have added a tiled image to the side of the menu. To do this I created a table with one row and two cells. In the first I simply specified the image background and width and I placed the menu within the start and end tags of the second cell.

</body> </html>

	Please tell me what you think
	name
	email
	website
	comments

next lesson    home    comment    more downloads    download this