HTML Table Coding Help

POSTED: Sun Jan 15, 2017 8:34 pm

argh I'm having such a hard time coding this freaking thing. I hate coding tables. I find them SO confusing, and this is probably why.

Will someone save my life and check my code please? Why is it not spanning evenly? What am I doing wrong here?

Title
Title 1 Title 2
Header 1
Item 1 Item 2 Item 3
Header 2
Head 1 Head 2
Stuff
Stuff 1 Stuff 2 Stuff 3 Stuff 4 Stuff 5
2: Stuff 1 2: Stuff 2 2: Stuff 3 2: Stuff 4 2: Stuff 5
Things
Things 1 Things 2 Things 3 Things 4 Things 5



Code: Select all
[html]
<div align="center">
    <table style="border:1px #c3c3c3 solid;width:700px;">
        <tbody>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid;width:50%;" colspan="15"><font size="6">Title</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="3" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Title 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;" colspan="3">Title 2</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="15" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;"><font size="6">Header 1</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="2">Item 1</td>
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="2">Item 2</td>
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="2">Item 3</td>
            </tr>
             <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="15"><font size="6">Header 2</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="3" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Head 1</td>
                <td colspan="3" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Head 2</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="15"><font size="6">Stuff</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;"><font size="5">Stuff 1</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;"><font size="5">Stuff 2</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;"><font size="5">Stuff 3</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;"><font size="5">Stuff 4</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;"><font size="5">Stuff 5</font></td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">2: Stuff 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">2: Stuff 2</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">2: Stuff 3</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">2: Stuff 4</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">2: Stuff 5</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="15"><font size="6">Things</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">Things 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">Things 2</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">Things 3</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">Things 4</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;">Things 5</td>
            </tr>
        </tbody>
    </table>
</div>[/html]
Salsola
The Family
User avatar
Sammiie
Luperci Your poison taints my blood
hardest of hearts
and from it she fled

POSTED: Mon Jan 16, 2017 11:35 pm

Title
Title 1 Title 2
Header 1
Item 1 Item 2 Item 3
Header 2
Head 1 Head 2
Stuff
Stuff 1 Stuff 2 Stuff 3 Stuff 4 Stuff 5
2: Stuff 1 2: Stuff 2 2: Stuff 3 2: Stuff 4 2: Stuff 5
Things
Things 1 Things 2 Things 3 Things 4 Things 5

Code: Select all
[html]
<div align="center">
    <table style="border:1px #c3c3c3 solid;width:700px;" colspan="30">
        <tbody>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid;width:50%;" colspan="30"><font size="6">Title</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="15" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Title 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;" colspan="15">Title 2</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="30" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;"><font size="6">Header 1</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="10">Item 1</td>
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="10">Item 2</td>
                <td style="text-align:center;padding:5px;border:1px #c3c3c3 solid; width:33%;" colspan="10">Item 3</td>
            </tr>
             <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="30"><font size="6">Header 2</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td colspan="15" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Head 1</td>
                <td colspan="15" style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:50%;">Head 2</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="30"><font size="6">Stuff</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6"><font size="5">Stuff 1</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6"><font size="5">Stuff 2</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6"><font size="5">Stuff 3</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6"><font size="5">Stuff 4</font></td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6"><font size="5">Stuff 5</font></td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">2: Stuff 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">2: Stuff 2</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">2: Stuff 3</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">2: Stuff 4</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">2: Stuff 5</td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;" colspan="30"><font size="6">Things</font>
                </td>
            </tr>
            <tr style="border:1px #c3c3c3 solid;">
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">Things 1</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">Things 2</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">Things 3</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">Things 4</td>
                <td style="text-align:center;padding:3px;border:1px #c3c3c3 solid;width:20%;" colspan="6">Things 5</td>
            </tr>
        </tbody>
    </table>
</div>[/html]

Colspans are dicks tldr. The colspan for the singular cell needs to be divisable by all subsequent cells, if that make sense. You have 1,2,3, & 5 columns in this table and so the colspan of the single column must be a multiple of all four. If you had a row with 4, it'd be even worse lmfao. Let me know if you need me to try explaining it better! c:
SILVANO SADIRA
Now, I've learned it's better living in the moment. Enjoy youth, cause it doesn't last.

Player WikiCommissionsCharacter Wiki
avatar by Lin
Cour des Miracles
Dead
User avatar
Gen
Luperci Equites Mate to Shiloh
Knight Errant
Commander Shepard
R E N A G O N • S O U L
Literary Liar

POSTED: Tue Jan 17, 2017 7:06 am

Thank you, Gen! You're a love, seriously!

I'll scrutinize it better and let you know if I have any questions!
Salsola
The Family
User avatar
Sammiie
Luperci Your poison taints my blood
hardest of hearts
and from it she fled

Art Help and Discussion