Table Trouble

Weird, it doesn’t even show the code I pasted in, and cannot edit that now

Are you having problems with something or with the system?

1 Like

I can see your original post, with the code. Would you like me to restore it?

I couldn’t see it. You must have X Ray eyes :smile:

Aye - I’m related to SuperTed.

Or maybe not. If you click on the pencil icon next to the time stamp, which shows that the post has been edited:

and then from the window that brings up, choose “Raw”

which will bring up the original version of the post, with the HTML tags:


You can copy and paste it from there.

@Diamax - you need to format your code in your post to get it to show correctly. Either highlight it and use the </> button in the editor window, or place three backticks ` on a line above your code, and a three on a line below your code.

1 Like

OK, Let’s see if this works…

Hello there people,

I am creating a table that I will be using as a menu on the page and I am having trouble with the structure.
Basically there are 3 columns, and each column has a different number of rows. The first two columns look just the way they were intended to, but the third column does not. Under the heading of the 3rd column there is a big gap before contents are displayed in the browser, and no matter what I tried I cannot fix that. I wonder if you guys can help me.
Here is the html scripting of my table:

///

<table width="100%" align="center" cellpadding="15" border="5" bordercolor="#ff0000">
<tr ><th colspan="3" style="color: #0000ff; background: #dbdbff; text-transform: uppercase;">Table of Contents</th></tr>
<tr>
<td width="33%" align="center" style="color: #000066; background: #999fff";">TRAINING</td>
<td width="33%" align="center" style="color: #000066; background: #999fff";">NUTRITION</td>
<td width="33%" align="center" style="color: #000066; background: #999fff";">REST AND RECUPERATION</td>
</tr>
<tr>
<td width="33%" style="vertical-align: top;" rowspan="7">
<ol type="1">
<li><a href="#Daily (Home) Training Programs">Daily (Home) Training Programs</a></li>
<li><a href="#Weekly Training Programs">Weekly Training Programs</a></li>
<li><a href="#Training Rules">Training Rules</a></li>
<li><a href="#Training Targets">Training Targets</a></li>
<li><a href="#High Intensity Training (H.I.T.)">High Intensity Training (H.I.T.)</a></li>
<li><a href="#Dumbbell or Barbell Weight Training">Dumbbell or Barbell Weight Training</a></li>
<li><a href="#Supersets">Supersets</a></li>
<li><a href="#Superset Training Programs">Superset Training Programs</a></li>
<li><a href="#Training Exercises - How To">Training Exercises - How To</a></li>
</ol>
<blockquote class="custom">
<ol type="a">
<li><a href="#Neck & Trap Training - Made Simple">Neck & Trap Training - Made Simple</a></li>
<li><a href="#Back & Shoulders Training - Made Simple">Back & Shoulders Training - Made Simple</a></li>
<li><a href="#Chest & Forearms Training - Made Simple">Chest & Forearms Training - Made Simple</a></li>
<li><a href="#Biceps & Triceps Training - Made Simple">Biceps & Triceps Training - Made Simple</a></li>
<li><a href="#Glutes & Lumbars Training - Made Simple">Glutes & Lumbars Training - Made Simple</a></li>
<li><a href="#Thighs & Calves Training - Made Simple">Thighs & Calves Training - Made Simple</a></li>
</ol>
</blockquote>
<ol type="1" start="10">
<li><a href="#Training Notes">Training Notes</a></li>
<li><a href="#Training Repetitions Range and Weights">Training Repetitions Range and Weights</a></li>
<li><a href="#Training Frequency by Body Type">Training Frequency by Body Type</a></li>
<li><a href="#Serge Nubret's Old School Workout">Serge Nubret's Old School Workout</a></li>
<li><a href="#Physical Exercises">Physical Exercises</a></li>
<li><a href="#Middle Section Exercises">Middle Section Exercises</a></li>
<li><a href="#Advanced Workout Training Programs">Advanced Workout Training Programs</a></li>
<li><a href="#Lumbar and Abdominal Section Workout">Lumbar and Abdominal Section Workout</a></li>
<li><a href="#Core Section Training">Core Section Training</a></li>
<li><a href="#Perform Dip Exercises Using Proper Technique">Perform Dip Exercises Using Proper Technique</a></li>
<li><a href="#V-Shape Training for X-Man Look">V-Shape Training for X-Man Look</a></li>
<li><a href="#Bodyweight Exercises">Bodyweight Exercises</a></li>
</ol>
</td>
<td width="33%" style="vertical-align: top;" rowspan="">
<ol type="1">
<li><a href="#Healthy Foods List">Healthy Foods List</a></li>
<li><a href="#Foods Throughout The Day">Foods Throughout The Day</a></li>
<li><a href="#Nutrition Tips">Nutrition Tips</a></li>
<li><a href="#Daily Nutrition">Daily Nutrition</a></li>
<li><a href="#Stay Regular">Stay Regular</a></li>
<li><a href="#Caloric Intake Needed To Gain Weight">Caloric Intake Needed To Gain Weight</a></li>
<li><a href="#Calories Info">Calories Info</a></li>
<li><a href="#Fibrous Carbohydrates">Fibrous Carbohydrates</a></li>
<li><a href="#List of Fibrous Carbohydrates">List of Fibrous Carbohydrates</a></li>
<li><a href="#Fibrous Carbs Are the Magic Flat Abs Foods">Fibrous Carbs Are the Magic Flat Abs Foods</a></li>
<li><a href="#The Truth About Carbohydrates">The Truth About Carbohydrates</a></li>
<li><a href="#6 Nutrient-Dense Foods To Rule Your Diet">6 Nutrient-Dense Foods To Rule Your Diet</a></li>
</ol>
</td>
<tr><td width="33%" align="center" style="color: #000066; background: #999fff";">SUPPLEMENTATION</td></tr>
<td width="33%" style="vertical-align: top;" rowspan="5">
<ol type="1">
<li><a href="#Homemade Weight Gainers">Homemade Weight Gainers</a></li>
<li><a href="#Supplements">Short List of Supplements</a></li>
<li><a href="#Coffee">Coffee - Best Energizer</a></li>
<li><a href="#Top 5 Supplements">Natural Supplements</a></li>
<li><a href="#The Best Supplements - Tried and Proven">The Best Supplements</a></li>
<li><a href="#Nutrition Program Example"> Program Example</a></li>
<li><a href="#Supplementation Program Example">Supplementation Program Example</a></li>
<li><a href="#Daily Supplementation Program">Daily Supplementation Program</a></li>
<li><a href="#Protein How-To">Whey Protein How-To</a></li>
<li><a href="#Protein-Variety">Different Kinds of Protein</a></li>
<li><a href="#Vitamins">Vitamin/Minerals Supplementation</a></li>
<li><a href="#Three Supplements To Take">Three Recommended Supplements</a></li>
<li><a href="#Diet (Nutrition/Supplementation) & Training Program (I)">Diet & Training Program (I)</a></li>
<li><a href="#Diet (Nutrition/Supplementation) & Training Program (II)">Diet & Training Program (II)</a></li>
</ol>
</td>
<td width="33%" style="vertical-align: top;" rowspan="">
<ol type="A">
<li><a href="#Healthy Foods List">The Importance of Sleep</a></li>
<li><a href="#Foods Throughout The Day">Sleep For Your Health</a></li>
<li><a href="#Nutrition Tips">How To Sleep Better</a></li>
</ol>
</td>
<tr><td width="33%" align="center" style="color: #000066; background: #999fff";">FINE TUNING DEVELOPMENT</td></tr>
<td>
<ul>
<li><a href="#Healthy Foods List">Maximize Testosterone Naturally</a></li>
</ul>
</td>
<tr><td width="33%" align="center" style="color: #000066; background: #999fff";">CONCLUSION</td></tr>
<td>
<ul>
<li><a href="#Healthy Foods List">Training</a></li>
<li><a href="#Healthy Foods List">Nutrition/Supplementation</a></li>
<li><a href="#Healthy Foods List">Rest/Recuperation</a></li>
<li><a href="#Healthy Foods List">Summary</a></li>
</ul>
</td>
</tr>
<tr>
<td colspan="1" align="center"><li-special><a href="#My Body Sculpting Program">Body Sculpting Program</a></li-special></td>
<td colspan="1" align="center"><li-special><a href="#Progress Log Example & Chronometer">Progress Log Example & Chronometer</a></li-special></td>
<td colspan="1" align="center"><li-special><a href="#Personal Fitness Goals">Fitness Goals</a></li-special></td>
</tr>
</table>

///

Thank you in advance!

Thank you Bear, I did try the </> first time and it didn’t seem to work, now I tried the three backslashes, as you suggested, still it does not show the code, or i don’t see it, I only see some output links.
Posting here is more complicated than needs to be.

Ha, finally it worked, I re-read in my mind your words about highlighting the code and then pressing the </> button.

Thank you again Bear!

Now I hope someone can help me here, because I have used up the whole day and night yesterday to make that table display correctly, and it didn’t work.

I find the </> difficult to use (because I’m not very good at accurately highlighting large sections of code ).

The alternative is three backticks ` (probably the key above the Tab key, depending on your layout), not backslashes \. But some European keyboards don’t have that key, so it doesn’t work for everyone.

[quote=“Diamax, post:7, topic:189240”]
Ha, finally it worked, I re-read in my mind your words about highlighting the code and then pressing the </> button.

Thank you again Bear!
[/quote]Glad you got it working in the end.

Why the table layout? It seems to me that you are trying to achieve a 3 column layout in which 4 rows are horizontally aligned (the last one in particular). I would like to suggest that you consider a non-HTML-table outer structure.

Table layout is the only one I know to use to create a menu structure like this, and even this gives me trouble. I would not know how to accomplish that with DIVS, and for right now will have to be tables. For the next major update of the page I will be learning and using DIVS to get the menu done, but this time will have to do with tables.

I know the trouble area is around the SUPPLEMENTATION header, but still cannot find the solution, if I take that header out and adjust the rowspans everything displays fine, but the 2nd column has to be broken into two, bottom part (second part) having its own header.

Have you checked to see if the page validates?

Quite often problems are due to invalid mark-up and the Validator will help you pinpoint them
eg. a missing </tr> tag

Writing table framed code is tricky when one wants a layout similar to yours. Writing a similar layout with divs is much simpler.

I did not copy the <li-special> tags because they are invalid code and I haven’t a clue what they might be used for. If you know, then I suppose you can put them back in.

Copy the attached file to your computer and open it in your favorite browser. It should be very similar to your table layout.

aTable3=Daimax.html|attachment (8.6 KB)

If you still insist on using the table layout that you started with, you’ll have to mention which row in the third column you want aligned with the title row in the second column and I’ll give it a try. Tables are fundamentally a matrix. Table rows to not behave independently. I’m not confident that your layout can be made to work in all browsers, anyway. I have seen tables align properly when the left column had all of the unique rows defined and the right column had the most “rowspans”; however, if the layout were reversed (as yours is) and the left column had the “rowspans”, the layout would not align properly cross-browser.

You realize that the links are completely invalid. You mentioned that, so I guess you have a reason.

Hi Mittineague,

I did not use the validator in years, but is a good idea. Thank you for reminding me about it!

Hello and THANK YOU Ronpat!!!

You solved a problem that kept me busy for almost the entire day yesterday and most of the last night, when I finally decided to post the issue, and go get some sleep because I wasn’t thinking right anymore.

The <li-special> tag is just a fancy bullet for the <ul> declared in the CSS style sheet, I can add that myself, no big deal.
The table that you have fixed shows perfectly in all the major browsers I have, IE, Firefox, Chrome, Opera. I’m sure it will work just as well once I add it to the page.

I am going to keep your solution and use it for the future update.
If you could do the fix on the layout that I have started with that would be a big favour for me, THANK YOU!!

The way the title/header in the 2nd column aligns in regards to the 3rd column makes no difference at all, as long as it follows in order from top-down in each column, as you have done it, it is perfect. I’m constantly adding more articles to the website, so that is why the alignment is actually good to be independent for each column.

The links actually work just the way they are, as soon as I implement the table code on the webpage.

Again, I cannot THANK YOU enough Ronpat, this table issue kept bugging me.

I think you may have missed an important point about table columns and rows. Actually, I didn’t express it very clearly so let me try again. A table is fundamentally a matrix. The rows in the columns do not align independently of one another. They are horizontally related. My example works because the content within the tall columns is all within the same one tall row, it is not subdivided into rows of cells. Using a table, one cannot just add rows to column 3, have it top align and expect column 2 to be unaffected. The number of rows must be accounted for. Your headers are in table cells. Adding a table cell for an article plus another cell for its header affects the matrix. That is why I asked specifically which row in column 3 should align with the header in column 2. Maintaining a the table structure that you have started will be a nightmare. Do not expect to find a sympathetic ear here.

Two attached files.

The first is a “aTableAid” file. It sets up a suggested method of building a table layout when colspan or rowspan attributes are used. The rows are classed “row1” thru 10, and the columns are classed “col1” thru 3. There is no code associated with those classnames. When using colspan or rowspan, they are invaluable layout aids.

aTableAid.html (4.2 KB)

The second file is yours repaired. It seems to work as desired. Your code was copied and pasted into the table. If it was invalid before, it’s still invalid.

aTableBuilder.html (8.3 KB)

If you want to learn more about laying out a table, W3.org is a good resource:

http://www.w3.org/TR/html401/struct/tables.html#h-11.3

Use the HTML validator. If you don’t give a care about your code, no one else will either.

Actually it was ignorant of me saying that they should be independent, of course they would not be independent, I don’t know what I was thinking, I said a stupid thing. Adding too much data in one cell will affect what happens in the other column. Again that was a foolish thing I said before. I’ve been working with tables for quite a while, no excuse, I should know better.
I’ve seen that there are limitations to what can be done with tables, but i still like them, especially if you keep things simple… which is not always the case here.

I’m glad you pointed out my crooked thinking, so I can keep learning and be reminded of how things work.

I appreciate you building that explanatory table for me, to study, and the other variant of the table using my initial table layout. I have some things to study, and I will surely start using DIVS for tables, because I was looking at your first table, that you posted and the code is very neatly laid out, clear, I like it. Actually all your code is clear. I will be studying tables more, can never know enough. Thank you for all the resources and help provided, you’ve been very helpful!

Yes I am going to start using the HTML Validator again, because I remember when I did that before it helped me find errors in my coding.

I am grateful for all your effort in helping and educating me on this matter and I won’t be asking anymore questions on this subject, I will use the material you provided to navigate thru on my own if there is something that shall come up.

All my thanks and all the best!!
Diamax

Here it is the final table structure that I am using on my page, for reference purposes, and hopefully this thread will help other people as well, because surely it did excellent for me.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>a Table Builder</title> 
</head> 
<body> 
 
<table width="100%" align="center" cellpadding="15" border="5" bordercolor="#0000ff"> 
    <tr> 
        <th colspan="3" style="color: #0000ff; background: #dbdbff; text-transform: uppercase;">Table of Contents</th> 
    </tr> 
    <tr> 
        <td width="33%" align="center" style="color: #000066; background: #999fff;">TRAINING</td> 
        <td width="33%" align="center" style="color: #000066; background: #999fff;">NUTRITION</td> 
        <td width="33%" align="center" style="color: #000066; background: #999fff;">RECUPERATION</td> 
    </tr> 
    <tr> 
        <td rowspan="5" valign="top"> 
            <ol type="1"> 
                <li><a href="#Daily (Home) Training Programs">Daily (Home) Training Programs</a></li> 
                <li><a href="#Weekly Training Programs">Weekly Training Programs</a></li> 
                <li><a href="#Training Rules">Training Rules</a></li> 
                <li><a href="#Training Targets">Training Targets</a></li> 
                <li><a href="#High Intensity Training (H.I.T.)">High Intensity Training (H.I.T.)</a></li> 
                <li><a href="#Dumbbell or Barbell Weight Training">Dumbbell or Barbell Weight Training</a></li> 
                <li><a href="#Supersets">Supersets</a></li> 
                <li><a href="#Superset Training Programs">Superset Training Programs</a></li> 
                <li><a href="#Training Exercises - How To">Training Exercises - How To</a></li> 
            </ol> 
            <blockquote class="custom"> 
                <ol type="a"> 
                    <li><a href="#Neck & Trap Training - Made Simple">Neck & Trap Training - Made Simple</a></li> 
                    <li><a href="#Back & Shoulders Training - Made Simple">Back & Shoulders Training - Made Simple</a></li> 
                    <li><a href="#Chest & Forearms Training - Made Simple">Chest & Forearms Training - Made Simple</a></li> 
                    <li><a href="#Biceps & Triceps Training - Made Simple">Biceps & Triceps Training - Made Simple</a></li> 
                    <li><a href="#Glutes & Lumbars Training - Made Simple">Glutes & Lumbars Training - Made Simple</a></li> 
                    <li><a href="#Thighs & Calves Training - Made Simple">Thighs & Calves Training - Made Simple</a></li> 
                </ol> 
            </blockquote> 
            <ol type="1" start="10"> 
                <li><a href="#Training Notes">Training Notes</a></li> 
                <li><a href="#Training Repetitions Range and Weights">Training Repetitions Range and Weights</a></li> 
                <li><a href="#Training Frequency by Body Type">Training Frequency by Body Type</a></li> 
                <li><a href="#Serge Nubret's Old School Workout">Serge Nubret's Old School Workout</a></li> 
                <li><a href="#Physical Exercises">Physical Exercises</a></li> 
                <li><a href="#Middle Section Exercises">Middle Section Exercises</a></li> 
                <li><a href="#Advanced Workout Training Programs">Advanced Workout Training Programs</a></li> 
                <li><a href="#Lumbar and Abdominal Section Workout">Lumbar and Abdominal Section Workout</a></li> 
                <li><a href="#Core Section Training">Core Section Training</a></li> 
                <li><a href="#Perform Dip Exercises Using Proper Technique">Perform Dip Exercises Using Proper Technique</a></li> 
                <li><a href="#V-Shape Training for X-Man Look">V-Shape Training for X-Man Look</a></li> 
                <li><a href="#Bodyweight Exercises">Bodyweight Exercises</a></li> 
            </ol> 
        </td> 
        <td rowspan="1" valign="top"> 
            <ol type="1"> 
                <li><a href="#Healthy Foods List">Healthy Foods List</a></li> 
                <li><a href="#Foods Throughout The Day">Foods Throughout The Day</a></li> 
                <li><a href="#Nutrition Tips">Nutrition Tips</a></li> 
                <li><a href="#Daily Nutrition">Daily Nutrition</a></li> 
                <li><a href="#Stay Regular">Stay Regular</a></li> 
                <li><a href="#Caloric Intake Needed To Gain Weight">Caloric Intake Needed To Gain Weight</a></li> 
                <li><a href="#Calories Info">Calories Info</a></li> 
                <li><a href="#Fibrous Carbohydrates">Fibrous Carbohydrates</a></li> 
                <li><a href="#List of Fibrous Carbohydrates">List of Fibrous Carbohydrates</a></li> 
                <li><a href="#Fibrous Carbs Are the Magic Flat Abs Foods">Fibrous Carbs Are the Magic Flat Abs Foods</a></li> 
                <li><a href="#The Truth About Carbohydrates">The Truth About Carbohydrates</a></li> 
                <li><a href="#6 Nutrient-Dense Foods To Rule Your Diet">6 Nutrient-Dense Foods To Rule Your Diet</a></li> 
            </ol> 
        </td> 
        <td rowspan="1" valign="top"> 
            <ol type="A"> 
                <li><a href="#Healthy Foods List">The Importance of Sleep</a></li> 
                <li><a href="#Foods Throughout The Day">Sleep For Your Health</a></li> 
                <li><a href="#Nutrition Tips">How To Sleep Better</a></li> 
            </ol> 
        </td> 
    </tr> 
    <tr> 
        <td width="33%" align="center" style="color: #000066; background: #999fff;">SUPPLEMENTATION</td> 
        <td width="33%" align="center" style="color: #000066; background: #999fff;">FINE-TUNING</td> 
    </tr> 
    <tr> 
        <td rowspan="3" valign="top"> 
            <ol type="1"> 
                <li><a href="#Homemade Weight Gainers">Homemade Weight Gainers</a></li> 
                <li><a href="#Supplements">Short List of Supplements</a></li> 
                <li><a href="#Coffee">Coffee - Best Energizer</a></li> 
                <li><a href="#Top 5 Supplements">Natural Supplements</a></li> 
                <li><a href="#The Best Supplements - Tried and Proven">The Best Supplements</a></li> 
                <li><a href="#Nutrition Program Example"> Program Example</a></li> 
                <li><a href="#Supplementation Program Example">Supplementation Program Example</a></li> 
                <li><a href="#Daily Supplementation Program">Daily Supplementation Program</a></li> 
                <li><a href="#Protein How-To">Whey Protein How-To</a></li> 
                <li><a href="#Protein-Variety">Different Kinds of Protein</a></li> 
                <li><a href="#Vitamins">Vitamin/Minerals Supplementation</a></li> 
                <li><a href="#Three Supplements To Take">Three Recommended Supplements</a></li> 
                <li><a href="#Diet (Nutrition/Supplementation) & Training Program (I)">Diet & Training Program (I)</a></li> 
                <li><a href="#Diet (Nutrition/Supplementation) & Training Program (II)">Diet & Training Program (II)</a></li> 
            </ol> 
        </td> 
        <td rowspan="1" valign="top"> 
            <ul> 
                <li><a href="#Healthy Foods List">Maximize Testosterone Naturally</a></li> 
            </ul> 
        </td> 
    </tr> 
    <tr> 
        <td width="33%" height="20" align="center" style="color: #000066; background: #999fff;">CONCLUSION</td> 
    </tr> 
    <tr> 
        <td rowspan="1" valign="top"> 
            <ul> 
                <li><a href="#Healthy Foods List">Training</a></li> 
                <li><a href="#Healthy Foods List">Nutrition/Supplementation</a></li> 
                <li><a href="#Healthy Foods List">Rest/Recuperation</a></li> 
                <li><a href="#Healthy Foods List">Summary</a></li> 
            </ul> 
        </td> 
    </tr> 
    <tr> 
        <td align="center"><li-special><a href="#My Body Sculpting Program">Body Sculpting Program</a></li-special></td> 
        <td align="center"><li-special><a href="#Progress Log Example & Chronometer">Progress Log Example & Chronometer</a></li-special></td> 
        <td align="center"><li-special><a href="#Personal Fitness Goals">Fitness Goals</a></li-special></td> 
    </tr> 
</table> 
 
</body> 
</html>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.