Fig 1.0 The bare minimum html code needed to create a table
| HTML PROGRAMMING - TABLE CONSTRUCTION |
Continuing from the previous section, in this section I am going to show you how to create a Table and how to create a classic layout/structure using
tables. If you are familiar with Microsoft Word and/or Excel you will know that a table is simply a collection of boxes, known as Cells, that allow you
to format (style) your data in a certain way. And it is the same with website tables. You create boxes of certain sizes, in certain positions, in order
to create the illusion that everything is aligned, positioned symmetrically and so on. You will see what I mean by this in a minute.
A website table in its true form is meant to represent data, just like Microsoft Word and Excel data, and some purist even believe that tables should not
be used at all because of advances in CSS for example. They feel that CSS code (i.e. <Div> Tags) should be used in place of tables. However. As an
absolute beginner you will probably find CSS too advanced. These purist tend to forget that they were absolute beginners once and that HTML is the
foundation (layout/structure) code and CSS is the styling code. You can have html code on its own but not CSS code on its own, because it is basically
add-on code that relies on (sits on) html code. So the two main questions here are "Do I NEED a fancy/stylish website?" and if so "Can I get the same
look in html as I can using CSS?". The honest answer would be no simply because CSS really has advanced website formatting/styling. However. The answer
could also be yes because html contains the necessary code to change font attributes, change paragraph styles, insert images and so on. Remember.
Programmers from years ago managed, quite happily, to create html code only websites. Even I and many others programme 80% html and 20% css. CSS at its
rawest is meant for those situations whereby you have 20 web pages for example all using the same font, paragraph style and so on. Instead of creating 20
web pages with the same styling attributes (i.e. the same font and paragraph code) you create a CSS script instead that contains the styling attributes
for any web page to utilize. That way you cut down your web page html code. So going back to table creation. As an absolute beginner start with html code
only and use tables - CSS will be explained/exampled in later sections.
Fig 1.0 above shows the bare minimum code needed to create a table consisting of one column of data (text). It is nothing fantastic but will help you to understand column and row formation as I explain more. Before I do go any further though I must explain the coding behind the table creation of course.
TABLE Tags
To create a table you must start with the opening (<table>) and closing (</table>) TABLE Tags. The code that goes in between
these table tags is what makes up your columns and rows. TABLE tags can, like many other tags, can have Attributes and Values assigned to them. For
example. If you want a table to be of a certain pixel width you can use the <width> Attribute, with a width/size Value of 800 for example.
<table width="800"> - Creates a table which is 800 pixels wide.
Table has no <height> attribute/value pairing simply because the height of a table is dictated by the height of a row (see below). If you leave out
the width attribute/value pairing the table will default to the largest width of your data (text width, image width, etc - whichever has the widest width
will be used as the default width).
In this example I have used the BORDER Attribute with the Value of 1. This means a border will be displayed around the edges of the table, 1 pixel thick,
so that I can see the table and its size. A value of 1 usually means TRUE (Switch It ON, Show It, YES, I Want It, etc) and a value of 0 (zero) means
FALSE (Switch It OFF, Hide It, NO, I Do Not Want It, etc), but with border it represents the thickness/depth of the pixel or border edge. Values in html
normally default to 0 (FALSE, Off, etc), which means if you put <table border="0"> or simply leave out the border attribute/value the border
will not be shown.
TR Tags
The TR Tags, opening (<tr>) and closing (</tr>), are used to create a table row. Or put another way. A row of data (i.e. text). On its own it is normally useless, but when you combine it with the TD Tags the two of them become powerful. You can use the align Attribute with a common Value of left, right, center or justify to horizontally align the data. The <valign> Attribute with a Value of left, right, middle or baseline can be used to vertically align the data. Other attributes can be used but these are the common two.
TD Tags
The TD Tags, opening (<td>) and closing (</td>), are used to create a table column. Or put another way. A column of data (i.e. text). On its own it is normally useless, but when you combine it with the TR Tags the two of them become powerful. This is because the two tags normally work together. Some of the Attributes you can use with the opening td tag include width, height, align and valign although width and height are classed as Deprecated (old fashioned). With deprecated attributes it is advised you use CSS code instead. Once you have created the table insert your data (text, image, etc) in between the td tags (as shown in Fig 1.0 above). Below is what the table looks like.
As you can see, the table is nothing fantastic at the moment mainly due to it not having enough rows and columns. To get the table looking like a classic
web page layout you need to add a few more rows and columns. Adding an additional column within a row is simply a case of inserting an extra set of td
tags in between the tr tags. For example. This is how you create two columns in one row.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table border="1">
<tr>
<td>
ROW One (Down) - COLUMN One (Across).
</td>
<td>
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
</table>
</body>
</html>
To add another column just insert another set of td tags. You do not need to put text in between the td tags all the time. Image code, Video code and
HyperLink code for example can all go in between them. In fact. No data has to go in between them at all. Leaving the td tags blank is one way of
creating space between columns (i.e. Column 1 td, SPACE td, Column 2 td). To add another row just insert another set of tr tags, and then insert another
set of td tags within them.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table border="1">
<tr>
<td>
ROW One (Down) - COLUMN One (Across).
</td>
<td>
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
<tr>
<td>
ROW Two (Down) - COLUMN One (Across).
</td>
</tr>
</table>
</body>
</html>
Hopefully you can see the pattern emerging here. Whenever you want to add a new column within a row you simply insert an extra set of td tags. And to add a new row you simply insert an extra set of tr tags, and then include at least one set of td tags (column tags) within that set of tr tags. One thing you should of noticed when adding a new column is that it initially has the same width as the previous column. Meaning. What happens if you need to insert a lot of text within row 2, column 1 for example? Will the text wrap around itself, get truncated (chop off at the end) in order to fit the column's width, stretch over the whole width of the table or what? Here is the answer.
As you can see, and if you experiment, long sentences and paragraphs automatically get wrapped (sent to the next line) whenever they reach the end of a column. This is done by default (by your web browser) and ensures that in situations like this your text is not chopped out just because it might not fit on one line. The downside is that the adjacent column's text might get squeezed onto another line, as above. To avoid this scenario you need to use the WIDTH, and possibly the HEIGHT, Attribute and Value pairings.
WIDTH Attribute/Value
The WIDTH attribute/value pairing allows you to adjust the width of a certain column. For example. With a table that is set to a width of 800 pixels wide;
If you wanted to have two columns of equal width, within that table, you would set their opening TD tags to use the WIDTH attribute with a value of
either "50%" each or a value of "400" pixels each.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td width="50%">
ROW One (Down) - COLUMN One (Across).
</td>
<td width="50%">
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
<tr>
<td>
ROW Two (Down) - COLUMN One (Across) - Blimey! This sentence is so long it is expanding the column's width. This sentence is making the text wrap now.
</td>
</tr>
</table>
</body>
</html>
Now that the columns are of equal width; the text in column 1, row 2, is naturally wrapped to fit in with the new column width of 50% (column 1, row 1),
therefore making its text wrap over three lines now instead of two. There was no need to put a width="50%" attribute/value pairing on the opening TD tag
of column 1, row 2 simply because it inherits the width from the top-most column above it (column 1, row 1). And roughly the same applies to the second
column on row 1. It did not need a width="50%" attribute/value pairing simply because the first width="50%" attribute/value pairing (column 1, row 1) did
the job - If column 1 is set to 50% it means column 2, regardless of its width="50%" attribute/value pairing, is automatically set to 50% of the table's
width. Why? Because that is how a table works. If it sees a column set to a certain width it applies that width and if it sees a column with an unset
width it sets it to the remaining width.
To clarify the just said. Here is a table of 800 pixels wide. It comprises of 3 columns. I have set column 1 to width="50%", column 2 to width="25%" and
column 3 to width="25%". Even though I could of left column 3 without any WIDTH attribute/value pairing, either way column 3 would still be 25% of the
table's width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td width="50%">
ROW One (Down) - COLUMN One (Across).
</td>
<td width="25%">
ROW One (Down) - COLUMN Two (Across).
</td>
<td width="25%">
ROW One (Down) - COLUMN Three (Across).
</td>
</tr>
</table>
</body>
</html>
As said above. You could leave out the last width="25%" attribute/value pairing because column 3 would use up the remainder of the table's width anyway
(the remaining 25%), but saying this there is no harm keeping it there if you want to be absolutely sure of a column's set width.
Ideally you want to try and give each column enough width percentage so that it can display a short sentence or headline, without looking scrunched up.
With the above example you would give each column 33%. Also. In normal circumstances you would use a table width of 1,000 pixels or more but here I am
using a table width of 800 pixels only, to represent a desktop screen size or web page size of 800 pixels wide. Hence why there is not much text that
can fit into each column of 33% (266 pixels). 33% of a 1,024 is approximately 341 pixels, which is roughly 8 more characters. It doesn't sound a lot but
it can make a longer sentence/phrase than above!
These days a web page, and even a desktop screen, that is 800 pixels wide only is almost obsolete and unheard-of, so use a table width of at least 900 pixels if not 1,000 pixels. This is because the standard desktop screen widths at the moment are 1,024 pixels and 1,280 pixels, so 800 pixels is a bit old hat now. This does not mean 800 is useless because 1,280 could be too much space for your information. Hence why I suggest you use a table width between 900 to 1,000 pixels wide. That way the spacing should be okay and your text should display as one sentence if not 1½ sentences.
HEIGHT Attribute/Value
To adjust the height of a row you use the HEIGHT Attribute/Value pairings. In this next example, following on from the example in Fig 1.5 above, I have
three columns spanning two rows (see Fig 1.5); By inserting height="300" into the TD tag of the first column (column 1, row 1) the height of
columns 1 and 2, row 1, will be altered to a height of 300 pixels. Column 1, row 2, will remain as it is.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td width="50%" height="300">
ROW One (Down) - COLUMN One (Across).
</td>
<td width="50%">
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
<tr>
<td>
ROW Two (Down) - COLUMN One (Across) - Blimey! This sentence is so long it is expanding the column's width. This sentence is making the text wrap now.
</td>
</tr>
</table>
</body>
</html>
With row 1's height now altered to 300 pixels high the text inside each of its two columns have become vertically centered. Or so it would appear. In fact, the text was vertically centered all along, by default. You did not notice it because, by default, if you do not specify the height attribute/value pairing the row is naturally the height of the text only (paragraph/text block only). In other words. There was no noticeable vertical/height space before simply because there was no extra pixels height. Now that 300 pixels make up the height of the row, with 14 of those pixels allocated for text height, the vertical space has become noticeable. I will explain text alignment in the next section. The second row was left intact because its height was not altered with a height attribute/value pairing.
COLSPAN Attribute/Value
Before I put everything together to show you the classic web page layout I must first explain how you get a one columned row to span the whole width of
two or more columns. Continuing with the above example. I will now show you how to get the text in column 1, row 2, to display across the width of the
whole table, thereby spanning columns 1 and 2 of row 1. It is achieved by using the COLSPAN (Column Span) Attribute/Value pairings.
The COLSPAN attribute needs to know how many columns the current column is to span. In this example the current column (column 1, row 2) has to span
(cover) two columns (columns 1 and 2 of row 1). Therefore colspan="2" needs to be placed inside the opening TD tag of row 2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td width="50%" height="300">
ROW One (Down) - COLUMN One (Across).
</td>
<td width="50%">
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
<tr>
<td colspan="2">
ROW Two (Down) - COLUMN One (Across) - Blimey! This sentence is so long it is expanding the column's width. This sentence is making the text wrap now.
</td>
</tr>
</table>
</body>
</html>
As you can see. The bottom column (column 1, row 2) now covers the width of the table and more precisely columns 1 and 2 of row 1. Meaning. If there were five columns in row 1, the column in row 2 would still only span/cover the two columns in row 1. The third, fourth and fifth columns in row 1 would have no columns underneath them from row 2.
ROWSPAN Attribute/Value
ROWSPAN is the same as COLSPAN but for row height. It allows a row to span many rows. Using the example in Fig 1.8 above, you could extend column 2, row 1,
to span/cover column 1, row 1 and column 1, row 2 simply by putting a rowspan="2" attribute/value pairing inside the opening TD tag of column 2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="800" border="1">
<tr>
<td width="50%" height="300">
ROW One (Down) - COLUMN One (Across).
</td>
<td width="50%" rowspan="2">
ROW One (Down) - COLUMN Two (Across).
</td>
</tr>
<tr>
<td>
ROW Two (Down) - COLUMN One (Across) - Blimey! This sentence is so long it is expanding the column's width. This sentence is making the text wrap now.
</td>
</tr>
</table>
</body>
</html>
Column 2, Row 1, has been able to push itself into the free space allocated by Column 2, Row 2. And the same with the colspan example above. Column 1, Row
2, was pushed into the free space allocated by Column 2, Row 2. So both colspan and rowspan could individually allocate the space of column 2, row 2. This
was possible because column 2, row 2, was an empty/available space.
If you put the rowspan="2" attribute/value pairing inside the opening TD tag of column 1 however you will get an undesired effect (Fig 1.12 below)
simply because column 1 cannot legally span over two rows. Why? Because in this example (Fig 1.11 below....from Fig 1.8 above) column 1, row 1 already
has a row underneath it (row 2) or put another way; has no extra/spare row underneath it. Hence why column 1, row 1 pushes itself into column 1, row 2
(to span two rows) and then forces column 1, row 2 to the right (underneath column 2, row 1). And this is the thing to remember - There must be a spare
column/row before you go around using colspan/rowspan.
Now that you know the basics of table creation here is an example of the classic web page layout. In the next sections I will show you how to insert images,
video and so on into the columns/rows amongst other things. The code below does not need any explanation simply because it uses code you have learnt from
above.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>FREE Website Creation help</title>
</head>
<body>
<table width="1000" border="1">
<tr>
<td colspan="3" height="100">
ROW One (Down) - COLUMN One (Across).
</td>
</tr>
<tr>
<td width="20%" height="300">
ROW Two (Down) - COLUMN One (Across).
</td>
<td width="60%">
ROW Two (Down) - COLUMN Two (Across).
</td>
<td width="20%">
ROW Two (Down) - COLUMN Three (Across).
</td>
</tr>
<tr>
<td colspan="3" height="80">
ROW Three (Down) - COLUMN One (Across).
</td>
</tr>
</table>
</body>
</html>
Remember. Tables are still as relevant today as they were years ago. Just because CSS has evolved and gets the job done quicker and/or smarter using
fewer codes it should not mean html tables are redundant and useless. As a beginner feel comfortable using html tables and then progress to using css
code. HTML is the foundation, and as with any foundation they are always relevant for the absolute beginner. What you have learnt on this page will
benefit you later when using css, but if I had taught you css first you would not of benefitted simply because you would not have that html foundation
code behind you. Very very rare do you come across a programmer who is 100% pure css and 0% html. It is very very common however to come across a
programmer who is 100% pure html and 0% css.
If you need to know more about Tags, Attributes and Values visit the W3Schools website.
All HTM, CSS, PHP and MySQL files in the websitecreationhelp.com folder and its sub-folders are (c) John White, 2009. All Rights Reserved. Email: John