[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3016
  • Last Modified:

Table padding inline CSS

I need to do a table layout like this image below, but with equal padding between each column.

image
Here is my code. I would like to use inline styles for now. Thanks!

    <table style="width: 100%;" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="padding: 6px; vertical-align: top; background-color: red; width: 25%;" rowspan="2">Client</td>
            <td style="padding: 6px; vertical-align: top; background-color: blue; width: 25%;">Employee Admin</td>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 25%;">Add Training</td>
            <td style="padding: 6px; vertical-align: top; background-color: yellow; width: 12%;" rowspan="2">Training Event Log</td>
            <td style="padding: 6px; vertical-align: top; background-color: orange; width: 13%;" rowspan="2">Purge Training</td>
        </tr>
        <tr>
            <td style="vertical-align: top;" colspan="2">
                <table style="width: 100%; padding: 0;" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding: 6px; vertical-align: top; background-color: green; width: 33%;">Module</td>
                        <td style="padding: 6px; vertical-align: top; background-color: blue; width: 33%;">Workshop</td>
                        <td style="padding: 6px; vertical-align: top; background-color: green; width: 33%;">Course</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

Open in new window

0
Starr Duskk
Asked:
Starr Duskk
  • 5
  • 2
2 Solutions
 
acbxyzCommented:
Do you mean the white space around your subtable?
Two possible solutions so far:
1. explicitly say padding: 0; in line 10 and margin: 0 in line 11
2. don't use a subtable at all. You can set "Employee Admin" and "Add Training" to colspan=3 and "Module" "Workshop" and "Course" to colspan=2 each.
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Thanks! I used #2. Now it looks like this. How do I get padding of 6 px. between everything? And how do I even up the middle columns to be the desired widths? I need the middle two to be 25%. Thanks!

image
Here is my code:

    <table style="width: 100%;">
        <tr>
            <td style="padding: 6px; vertical-align: top; background-color: red; width: 25%;" rowspan="2">Client</td>
            <td style="padding: 6px; vertical-align: top; background-color: blue; width: 25%;" colspan="3">Employee Admin</td>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 25%;" colspan="3">Add Training</td>
            <td style="padding: 6px; vertical-align: top; background-color: yellow; width: 12%;" rowspan="2">Training Event Log</td>
            <td style="padding: 6px; vertical-align: top; background-color: orange; width: 13%;" rowspan="2">Purge Training</td>
        </tr>
        <tr>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 33%;" colspan="2">Module</td>
            <td style="padding: 6px; vertical-align: top; background-color: blue; width: 33%;" colspan="2">Workshop</td>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 33%;" colspan="2">Course</td>
        </tr>
    </table>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Wait I think I figured out the widths. Made the bottom three 16%. But still need the padding. I want space between everything. Even space.
 
    <table style="width: 100%;">
        <tr>
            <td style="padding: 6px; vertical-align: top; background-color: red; width: 25%;" rowspan="2">Client</td>
            <td style="padding: 6px; vertical-align: top; background-color: aqua; width: 25%;" colspan="3">Employee Admin</td>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 25%;" colspan="3">Add Training</td>
            <td style="padding: 6px; vertical-align: top; background-color: yellow; width: 12%;" rowspan="2">Training Event Log</td>
            <td style="padding: 6px; vertical-align: top; background-color: orange; width: 13%;" rowspan="2">Purge Training</td>
        </tr>
        <tr>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 16%;" colspan="2">Module</td>
            <td style="padding: 6px; vertical-align: top; background-color: blue; width: 16%;" colspan="2">Workshop</td>
            <td style="padding: 6px; vertical-align: top; background-color: green; width: 16%;" colspan="2">Course</td>
        </tr>
    </table>

Open in new window


fs
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
It will ultimately look like this:
fs
0
 
acbxyzCommented:
padding is inside the cells, within background. margin is outside.

But for tables there is another way.
With html-code it is an attribute called cellspacing, with css this is border-spacing.

    <table style="width: 100%; border-spacing: 6px; border-collapse: separate; font-family: Arial; font-weight: bold; color: white;">
        <tr style="height: 50px;">
            <td style="padding: 6px; vertical-align: bottom; background-color: red;    width: 25%;" rowspan="2">Client</td>
            <td style="padding: 6px; vertical-align: top;    background-color: aqua;   width: 25%;" colspan="3">Employee<br>Admin</td>
            <td style="padding: 6px; vertical-align: top;    background-color: green;  width: 25%;" colspan="3">Add<br>Training</td>
            <td style="padding: 6px; vertical-align: top;    background-color: yellow; width: 12%;" rowspan="2">Training<br>Event<br>Log</td>
            <td style="padding: 6px; vertical-align: bottom; background-color: orange; width: 13%;" rowspan="2">Purge<br>Training</td>
        </tr>
        <tr style="height: 50px;">
            <td style="padding: 6px; vertical-align: top;    background-color: green;  width: 17%;" colspan="2">Module</td>
            <td style="padding: 6px; vertical-align: middle; background-color: blue;   width: 17%;" colspan="2">Workshop</td>
            <td style="padding: 6px; vertical-align: bottom; background-color: green;  width: 17%;" colspan="2">Course</td>
        </tr>
    </table>

Open in new window

0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks!
0
 
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I have a continuation of this question here:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28506036.html
If anyone wants to help.
thanks!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now