VoyForums: Tables: Liberated

[ Show ]

Support VoyForums

[ Shrink ]

VoyForums Announcement: Programming and providing support for this service has been a labor of love since 1997. We are one of the few services online who values our users' privacy, and have never sold your information. We have even fought hard to defend your privacy in legal cases; however, we've done it with almost no financial support -- paying out of pocket to continue providing the service. Due to the issues imposed on us by advertisers, we also stopped hosting most ads on the forums many years ago. We hope you appreciate our efforts.

Show your support by donating any amount. (Note: We are still technically a for-profit company, so your contribution is not tax-deductible.) PayPal Acct: Feedback:

Donate to VoyForums (PayPal):

Liberated Tables
Tables are a simple way to create lists, displayed in several rows both horizontally and vertically.
However, there's one major drawback: they cannot easily be altered.
For example, here's a great Tabled list: Voy.com/233001/.
(...based upon TE Shannon's original build, Voy/230100.)
In any case, this list is readily accessible, convenient, and user-friendly.

But, there's one enormous drawback!
...most Tables are difficult to alter. What if additions are necessary? Let's suppose, a new website is placed alphabetically under letter-L?
Unfortunately, it will disrupt the entire table sequence.
You'd have to alter each and every rowin order to solve this problem.
Luckily, there's a simple solution to this problem.
Transform each row into its own separate Table.
So, instead of creating one giant table; every row becomes a complete table.
(Thus, future altercations will only affect one specific line).
This method also has its drawbacks. Although it doesn't cosmetically suffer;
these Liberated tables will take vastly more HTML code.
Thus, I've rarely used this here on Voy forums.

Here it is:
The Rows are now DISTINCTIVE and expandable

....and, so on; and, so on...
Please refer to bottom-of-page to view the entire HTML code
...along with added info: (Row1) (Row2) (Row3) (Row4) (Row5) (Row6)

...and since we're altering Tables, here's another method;
wider lines within the Tables:
(note: This page is using basic HTML.
There are current CSS methods which offer superior techniques)

Interestingly, Tables can also be used for making Titles:
hello hello

Welcome to our Page!

-----
return to

My Homepage is Bing

-----------------------
Plus, this oddity:

Table without Borders

Table without Borders

<table border="0"> <tbody> <tr bgcolor="#c6c6c6"> <td><a href=""></a>Title without Borders</td> </tr> </tbody></table>

Table with Thick Borders

<table border="6"> <tbody> <tr bgcolor="#C6C6C6"> <td><a href=""></a>Table with Thick Borders</td> </tr> </tbody></table>

Here it is --- bottom-of-page↓:
The Rows are now DISTINCTIVE and expandable

<center>
<table border="">
<tbody>
<tr>
<td><a href="http://www.">(Row1) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www.">Title 3</a></td>
<td><a href="http://www.">Title 4</a></td>  
<td><a href="http://url%20here/"></a></td> 
</tr>
</tbody></table>

<table border="">
<tbody>
<tr>
<td><a href="http://www.">(Row2) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www.">Title 3</a></td>
<td><a href="http://www.">Title 4</a></td>  
<td><a href="http://www./">Title 5</a></td> 
<td><a href="http://www.">title 6</a></td> 
<td><a href="http://url%20here/"></a></td> 
</tr>
</tbody></table>

<table border=""> 
<tbody>
<tr> 
<td><a href="http://www./">(Row3) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www./">Title 3</a></td>
<td><a href="http://www.">Title 4</a></td>
<td><a href="http://www./">Title 5</a></td> 
<td><a href="http://url%20here/"></a></td> 
</tr>
</tbody></table>

<table border="">
<tbody>
<tr>
<td><a href="http://www.">(Row4) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www.">Title 3</a></td>
<td><a href="http://www.">Title 4</a></td>  
<td><a href="http://www./">Title 5</a></td> 
<td><a href="http://www.">title 6</a></td> 
<td><a href="http://url%20here/"></a></td> 
</tr>
</tbody></table>

<table border="">
<tbody>
<tr>
<td><a href="http://www.">(Row5) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www.">Title 3</a></td>
 <td><a href="http://url%20here/"></a></td>

</tr>
</tbody></table>

<table border="1">
<tbody>
<tr>
<td><a href="http://www.">(Row6) Title 1</a></td>
<td><a href="http://www./">Title 2</a></td>
<td><a href="http://www.">Title 3</a></td>
<td><a href="http://www.">Title 4</a></td>  
<td><a href="http://www./">Title 5</a></td> 
<td><a href="http://www.">title 6</a></td> 
<td><a href="http://url%20here/"></a></td>

</tr>
</tbody></table>

Each Row is within its own separate Table.
For instance: one distinct Table represents "Row 5":
<table border=""> <tbody> <tr> <td><a href="http://www.">Title 1</a></td> <td><a href="http://www./">Title 2</a></td> <td><a href="http://www.">Title 3</a></td> <td><a href="http://url%20here/"></a></td> </tr> </tbody></table>

Here, I will add 2 more titles:
<table border=""> <tbody> <tr> <td><a href="http://www.">Title 1</a></td> <td><a href="http://www./">Title 2</a></td> <td><a href="http://www.">Title 3</a></td> <td><a href="http://www./">Title 4</a></td> <td><a href="http://www.">Title 5</a></td> <td><a href="http://url%20here/"></a></td> </tr> </tbody></table>

(Above, are Titles 1 thru 5).
After-which,
an added <td.a href="http://url%20here/"</td> line always appears at the end... ...for cosmetic purposes only.
Also, you'll notice additional HTML, such as table border=""...
which apparently serves no practical purpose.
These are for advanced users (who intend to add features later-on).

finally, below is an example of the simple old-style Tables which you're probably quite familiar with:

Title 1 Title 2 title 3 title 4

title 5 title 6 title 7 title 8

<center> <table border=""> <tbody> <tr> <td><a href="http://www./">Title 1</a></td> <td><a href="http://www./">Title 2</a></td> <td><a href="http://www./">title 3</a></td> <td><a href="http://www./">title 4</a></td> </tr> <tr> <td><a href="http://www./">title 5</a></td> <td><a href="http://www./">title 6</a></td> <td><a href="http://www./">title 7</a></td> <td><a href="http://www./">title 8</a></td> </tr> </tbody></table> </center>

----------
a Colored Table:

Title 1 Title 2 title 3 title 4

title 5 title 6 title 7 title 8

<table border="1" cellspacing="1" width="42%" bgcolor="#CCCCCC" bordercolor="#000000" bordercolordark="#000000"> <tbody> <tr> <td><a href="http://www./">Title 1</a></td> <td><a href="http://www./">Title 2</a></td> <td><a href="http://www./">title 3</a></td> <td><a href="http://www./">title 4</a></td> </tr> <tr> <td><a href="http://www./">title 5</a></td> <td><a href="http://www./">title 6</a></td> <td><a href="http://www./">title 7</a></td> <td><a href="http://www./">title 8</a></td> </tr> </tbody></table>