The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
Tasteful, tactful and tremendous tables
As mundane as they may sometimes appear, tables are the backbone to many modern websites and their use in assisting web design
is indisputable. They are capable of holding data together and can be easily coded and customised to sink into your
webpage and quietly work their magic. Or, they can faithfully serve their purpose and provide a quick, simple solution to
making information presentable and easily accessible.
Where to start?
Coding tables in HTML is so clean, quick and easy that once you've done it a first time, it will become second nature and you'll know your
TDs from TRs and your Cells from your Rows without pause for thought.
The basic tag-
This is the fundamental tag which creates the table and houses a majority of the table's properties.
Table Row
This defines a row in the table that you have just created. Each row you create runs horizontally in the table and is broken up into data cells.
Table Data
This is responsible for each cell in the HTML table. Each cell sits on a row.
Sticking it all together
Know that you've been introduced to Mr Table and his family of TRs and TDs you will need to know how to plaster them all together. Unlike a lot
of HTML coding, fortunately it all fits together logically.
As you can see the tag encloses the coding and makes it easy to see wherabouts the coding starts and where it is terminated (
).
Using the tag we have created a row which is broken up into our subsequent cells defined by the s.
Paste the above code into your HTML editor to see exactly what it does.
It will present the text Row 1: Cell 1 alongside the text Row 1: Cell 2.
There we have it, our first two cells sitting snuggly side-by-side, what a moment!
Now, as with any HTML the position of the tags don't affect the rows and cells behaviour within the table.
For example, the above coding is the same as this-
In fact, i recommend that you set out the code as above because it gives you a visual assist whilst you code, because you can see by the format
that thes fit snuggly within the s... The cells fit within the rows.
Tables come into their own when you have vast amounts of data that you want to present neatly and accessibly on a webpage.
Currently, we have very little data in our table and only one row.
Now, lets add another couple of rows to the table.
The coding does appear more complicated but you should easily begin to see the pattern as new rows are made and previous rows terminated.
Also, using the property you can add an attractive border to the information which gives it a real authentic table appearance. /
As mundane as they may sometimes appear, tables are the backbone to many modern websites and their use in assisting web design
is indisputable. They are capable of holding data together and can be easily coded and customised to sink into your
webpage and quietly work their magic. Or, they can faithfully serve their purpose and provide a quick, simple solution to
making information presentable and easily accessible.
Where to start?
Coding tables in HTML is so clean, quick and easy that once you've done it a first time, it will become second nature and you'll know your
TDs from TRs and your Cells from your Rows without pause for thought.
The basic tag-
<TABLE>This is the fundamental tag which creates the table and houses a majority of the table's properties.
Table Row
<TR>This defines a row in the table that you have just created. Each row you create runs horizontally in the table and is broken up into data cells.
Table Data
<TD>This is responsible for each cell in the HTML table. Each cell sits on a row.
Sticking it all together
Know that you've been introduced to Mr Table and his family of TRs and TDs you will need to know how to plaster them all together. Unlike a lot
of HTML coding, fortunately it all fits together logically.
<TABLE>
<TR>
<TD>Row 1: Cell 1</TD>
<TD>Row 1: Cell 2</TD>
</TR>
</TABLE>
As you can see the
Using the
Paste the above code into your HTML editor to see exactly what it does.
It will present the text Row 1: Cell 1 alongside the text Row 1: Cell 2.
There we have it, our first two cells sitting snuggly side-by-side, what a moment!
Now, as with any HTML the position of the tags don't affect the rows and cells behaviour within the table.
For example, the above coding is the same as this-
<TABLE>
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
</TABLE>
In fact, i recommend that you set out the code as above because it gives you a visual assist whilst you code, because you can see by the format
that the
Tables come into their own when you have vast amounts of data that you want to present neatly and accessibly on a webpage.
Currently, we have very little data in our table and only one row.
Now, lets add another couple of rows to the table.
<TABLE BORDER="1">
<TR>
<TD>Row 1: Cell 1</TD> <TD>Row 1: Cell 2</TD>
</TR>
<TR>
<TD>Row 2: Cell 1</TD> <TD>Row 2: Cell 2</TD>
</TR>
<TR>
<TD>Row 3: Cell 1</TD> <TD>Row 3: Cell 2</TD>
</TR>
</TR>
</TABLE>
The coding does appear more complicated but you should easily begin to see the pattern as new rows are made and previous rows terminated.
Also, using the
| tags. One last trick To make your TABLES even more useful and professional you can create virtual headers which are cells that just take up a defined number of cells. COLSPAN="2" instructs the cell to take up 2 cells across We can also replace this with ROWSPAN="" to set how many rows a cell spans.
I see this is already in the tips section - cheers ma man
Digi
Hi nitro_goat,
I'm also still a 'Tables' fan, but I notice these days most designers are favouring non-Table, pure CSS designs. Some designers seem to have a real 'problem' with sites still built around tables! - which is a shame as they work for me! With all the browser hacks required for pure CSS sites I'm sticking with Tables for now... NB. The Tips/Tricks/Tutorials sticky links to your last post about tables Past Tables info do you need Digi to change the link to this thread? Search Freeola Chat
Yeh there's definitely room for expansion, especially along the CSS route. I just aimed to run through the basics first though!
Nice post. Forgot to mention the
<th>heading</th> Table heading tag.<thead></thead> Table header tag.and <tbody></tbody> Table body tags.A little underused but perfectly valid and useful when using Javascript to manipulate tables. Maybe you'd like to add details on how to control table styling using CSS, get rid of the old bgcolor, valign, align etc?
Tasteful, tactful and tremendous tables As mundane as they may sometimes appear, tables are the backbone to many modern websites and their use in assisting web design is indisputable. They are capable of holding data together and can be easily coded and customised to sink into your webpage and quietly work their magic. Or, they can faithfully serve their purpose and provide a quick, simple solution to making information presentable and easily accessible. Where to start? Coding tables in HTML is so clean, quick and easy that once you've done it a first time, it will become second nature and you'll know your TDs from TRs and your Cells from your Rows without pause for thought. The basic tag- <TABLE>This is the fundamental tag which creates the table and houses a majority of the table's properties. Table Row <TR>This defines a row in the table that you have just created. Each row you create runs horizontally in the table and is broken up into data cells. Table Data <TD>This is responsible for each cell in the HTML table. Each cell sits on a row. Sticking it all together Know that you've been introduced to Mr Table and his family of TRs and TDs you will need to know how to plaster them all together. Unlike a lot of HTML coding, fortunately it all fits together logically. As you can see the Using the s. | Paste the above code into your HTML editor to see exactly what it does. It will present the text Row 1: Cell 1 alongside the text Row 1: Cell 2. There we have it, our first two cells sitting snuggly side-by-side, what a moment! Now, as with any HTML the position of the tags don't affect the rows and cells behaviour within the table. For example, the above coding is the same as this- In fact, i recommend that you set out the code as above because it gives you a visual assist whilst you code, because you can see by the format that the s fit snuggly within the | Tables come into their own when you have vast amounts of data that you want to present neatly and accessibly on a webpage. Currently, we have very little data in our table and only one row. Now, lets add another couple of rows to the table. The coding does appear more complicated but you should easily begin to see the pattern as new rows are made and previous rows terminated. Also, using the
|
