How to construct tables in HTML - APSense help.

by Bj aka Bill Brown Hosting and Backup Service provider How to construct tables in HTML - APSEnse help.


Tables can be used to create a great diversity of layout in your posts.
The examples and the code I have given are a demonstration of the various things you can do with tables and if you copy the code to a notepad document and save as tables.html to your desk top you will be able to open it in your browser.
Then by right clicking and selecting view source you will be able to change things and experiment.
Remember you must click on save when you have made changes the hit the refresh to see what effect it had.
Keep a spare copy of the original coding in case you cant correct something if it goes wrong.

This is a demonstration to show how tables can be used to manipulate the layout of both your blogs and group posts. This area is where the title can go. It is center aligned and spans 3 columns.
This is the first of three elements on this row. It is 25% of the total table width and is left aligned	this is the second element on this row. It is center aligned and is 50% of the total table width.	This is the third element of this row and is 25% of the total table width and is right aligned
On this row I have created two elements. this one spans the first two columns and is therefore 75% of the total table width. (the 25 % column 1 uses and the 50% column 2 uses)		This is another right aligned element using the remaining 25% of the total table width.
This is a right aligned element that is less in height than the center element.	This element although created in the 4th row also extends down into row 5 I have also added extra text here in this element To demonstrate the next row Note how the vertical alignment of the text is center aligned in the two red elements in the 4th row	This is the third element of table row 4
Row 5 Text bottom vertically aligned		row 5 Text top vertically aligned
Points to note. All elements will automatically adjust their height to display the content that you enter in them. The content can be text, banners, images, or any combination of these 3 items. The center element spanning rows 4 and 5 will adjust to stay the same height as the combined height needed by the left and right elements of rows 4 and 5 should it be greater than needed by the content of the center element. The side elements will adjust in height to ensure that their combined height is equal to the height of the center element if it needs more height than the two side elements of rows 4 and 5 combined.

This is the same as above but with the table borders showing so that you can see the areas being used and the spacing between each area.

This is a demonstration to show how tables can be used to manipulate the layout of both your blogs and group posts. This area is where the title can go. It is center aligned and spans 3 columns.
This is the first of three elements on this row. It is 25% of the total table width and is left aligned	this is the second element on this row. It is center aligned and is 50% of the total table width.	This is the third element of this row and is 25% of the total table width and is right aligned
On this row I have created two elements. this one spans the first two columns and is therefore 75% of the total table width. (the 25 % column 1 uses and the 50% column 2 uses)		This is another right aligned element using the remaining 25% of the total table width.
This is a right aligned element that is less in height than the center element.	This element although created in the 4th row also extends down into row 5 I have also added extra text here in this element To demonstrate the next row Note how the vertical alignment of the text is center aligned in the two red elements in the 4th row	This is the third element of table row 4
Row 5 Text bottom vertically aligned		Row 5 Text top vertically aligned
Points to note. All elements will automatically adjust their height to display the content that you enter in there. The content can be text, banners, images, or any combination of these 3 items. The center element spanning rows 4 and 5 will adjust to stay the same height as the combined height needed by the left and right elements of rows 4 and 5 should it be greater than needed by the content of the center element. The side elements will adjust in height to ensure that their combined height is equal to the height of the center element if it needs more height than the two side elements of rows 4 and 5 combined.

You can copy the coding below into a note pad document and play with it.

One important thing to note is I always make table widths dynamic in that I do not use any fixed widths I always work with percentages of the total width.
This will make the table elements expand and contract (to a certain point) if the viewer changes the width of their browser and it will keep everything in proportion as far as width goes. Naturally if you have an image or banner in one of the elements then they will only close up to the width of the image or banner. before the scroll bar activates.
This is a personal preference of mine you can however make something a fixed width by replacing the percentages in the width command by a set number of pixels. If you do this then the total should not be more than 750 to 800 or it will be too wide for those viewing on a 800 wide screen resolution. You will also need to calculate the number of pixels you need for each element in each table row.
for using in posts in APSense I strongly recommend using the percentage method as there is only about 500 pixel width available.


Basic elements of a table.

A table consists of 1 or more rows (TR) and a row consists of one or more elements or cells (TD).
All three parts MUST be included and for each open command there must be a close command.
The Commands MUST be nested in side each other as follows

<table> The open table command
<tr> The open table row command
<td> The open row element command
the content of the element goes here.
</td>The close row element command.
</tr> The close Row command.
</table> The close table command.

As you will see in the coding below for each row opened there must be at least one Row element and the row must be closed before opening the next row.

WARNING: All the table components MUST be used. The aim of this post is To help members add some diversity to their posts. It is not intended to add extra work to supports already heavy workload by them having to go round deleting post that we cant delete because we forgot to close the table off for example.


Commands used in the table definition

<table width="100%" cellpadding="3" cellspacing="5" border="0" bordercolor="#FF0000" bgcolor="#FFFFD9">

width
Tells the table how much available width to use in this case all available. The 100% could be changed to a set number of pixels as described in the above notes.

cellpadding
tells the table how much space in pixels you want between the content and the edge of the Row element (cell) This can be 0 to what ever you want but I personally rarely use more than 5.

cellspacing
Tells the table how much space in pixels you want between cells. Note that your back ground color will be visible if you set this to 1 or more.

border
defines the pixel width of the border. if set to 0 then no border is shown as you see in the first example on this page. in the second example I changed the 0 to 2.

bordercolor
defines the color of the border to be shown if the border command is set to 1 or more. and is the Hexadecimal code for the color in this case Red.

bgcolor
This is again a hexadecimal code and defines the background color of the area of the page the table covers. In this case I have set it to a slightly off white color.


Commands used in table row definitions
Note these commands are optional and only needed if you want special formatting.

bgcolor
Where as the bgcolor in the table defines the background color of the complete table when used in a table row declaration the color takes precedence over the table bgcolor command for the row back ground color.


Commands used in row element definitions
Note: These commands are optional and only needed if you want special formatting.

align
defines how the text will be aligned horizontally in the element. The options are left, right, or center. If no align command is used then the default is left.

valign
defines how the text will be aligned vertically in the element. The options are top, bottom, or middle. If no valign command is used then the default is middle.

colspan
This is used to make an element spread across the top of columns we want it to. In this case as I have rows with 3 elements and in the first row I want the single element to act as a header so I have told it to span all 3.
In row 3 I wanted the first element to span the first and second columns so used 2.

rowspan
This is used to make an element extend vertically into more than one row. In this case as I have made the center ellement of row 4 extend down to row 5 as well so I used 2.



See Making the most of your APSense Business Center. 8. Basic HTML Tips and tricks. For an explanation of basic text formatting codes used inside the row elements.

The code


<table width="100%" cellpadding="3" cellspacing="5" border="0" bordercolor="#FF0000" bgcolor="#FFFFD9">
<tr>
<td align="center" colspan="3">
<font color="#FF0000"><b>
This is a demonstration to show how tables can be used to manipulate the layout of both your blogs and group posts.
<br />This area is where the title can go. It is center aligned and spans 3 columns.</b></font>
</td>
</tr>
<tr bgcolor="#00FFFF">
<td width="25%" align="left">
This is the first of three elements on this row. It is 25% of the total table width and is left aligned
</td>
<td width="50%" align="center">
this is the second element on this row.
<br />It is center aligned and is 50% of the total table width.
</td>
<td width="25%" align="right">
This is the third element of this row and is 25% of the total table width and is right aligned
</td>
</tr>
<tr bgcolor="#FFFF00">
<td width="75%" align="left" colspan="2">
On this row I have created two elements. this one spans the first two columns and is therefore 75% of the total table width. (the 25 % column 1 uses and the 50% column 2 uses)
</td>
<td width="25%" align="right">
This is another right aligned element using the remaining 25% of the total table width.
</td>
</tr>
<tr bgcolor="#FF0000">
<td width="25%" align="right">
<font color="#FFFFFF"><b>This is a right aligned element that is less in height than the center element.</b></font>
</td>
<td bgcolor="#FF00FF" width="50%" align="center" rowspan="2"><b>
This element although created in the 4th row also extends down into row 5
<br />
<br />I have also added extra text here in this element
<br /> To demonstrate the next row
<br />Note how the vertical alignment of the text is center aligned in the two red elements in the 4th row
<br />
<br />
<br />
</b>
</td>
<td width="25%" align="left">
<font color="#FFFFFF"><b>
This is the third element of table row 4
</b>
</font>
</td>
</tr>
<tr bgcolor="#00FF00">
<td width="25%" align="left" valign="bottom">
Row 5 Text bottom vertically aligned
</td>
<td width="25%" align="right" valign="top">
Row 5 Text top vertically aligned
</td>
</tr>
<tr bgcolor="#00FFFF">
<td align="left" colspan="3"><b>
Points to note.
<br />
<br />All elements will automatically adjust their height to display the content that you enter in them.
<br />The content can be text, banners, images, or any combination of these 3 items.
<br />The center element spanning rows 4 and 5 will adjust to stay the same height as the combined height needed by the left and right elements of rows 4 and 5 should it be greater than needed by the content of the center element.
<br />The side elements will adjust in height to ensure that their combined height is equal to the height of the center element if it needs more height than the two side elements of rows 4 and 5 combined.</b>
</td>
</tr>
</table>
<br />

Sponsor Ads

• Ad Space Available - Rent it Now!

Created on Dec 31st 1969 18:00. Viewed 0 times.

Comments