/    Sign up×
Community /Pin to ProfileBookmark

Two tables one aside another

Copy linkTweet thisAlerts:
Mar 24.2015

I would like to display two tables with the same number of rows, which are placed not one under another but on the same level, horizontally one aside another. I decided to create one table and make transparent horizontal borders of the column in the middle of the table. The internal horizontal lines disappeared, but the top and bottom line in the table remain. How can I solve this?
My code (a little simpified) is as follows:

[code=html]
<table width=”300″ border=”1″ style=”border-collapse: collapse;” >
<tr>
<td>Text1</td>
<td width=”100″ style=”border-top-color:transparent; border-bottom-color:transparent;”>&nbsp;</td>
<td>Text4</td>
</tr>
<tr>
<td>Text2</td>
<td style=”border-top-color:transparent; border-bottom-color:transparent;”>&nbsp;</td>
<td>Text5</td>
</tr>
<tr>
<td>Text3</td>
<td style=”border-top-color:transparent; border-bottom-color:transparent;”>&nbsp;</td>
<td>Text6</td>
</tr>
</table>
[/code]

Or maybe I should use “div” tag to position the two separate tables on the same level? Unfortunately I have no idea how to do it.

to post a comment
HTML

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@jedaisoulMar 24.2015 — 
  • 1. Why are you using obsolete HTML code like [b]border="1"[/b] AND inline CSS style? Ditch the HTML code, and replace the inline styling by CSS attributes and/or classes.


  • 2. Either:


    • a) Use two tables, and float them so they can be positioned side-by-side. Or...

    b) Embed the two tables in a table with no border (old fashioned, but if you are more comfortable with that approach...).
    Copy linkTweet thisAlerts:
    @coderunnerMar 24.2015 — Something like this?

    [code=html]<table width="300" border="0" style="border-collapse: collapse;">
    <tr>
    <td style="border-style: solid; border-color: black; border-width: 1px 1px 0 1px;">Text1</td>
    <td width="100">&nbsp;</td>
    <td style="border-style: solid; border-color: black; border-width: 1px 1px 0 1px;">Text4</td>
    </tr>
    <tr>
    <td style="border-style: solid; border-color: black; border-width: 1px 1px 1px 1px;">Text2</td>
    <td width="100">&nbsp;</td>
    <td style="border-style: solid; border-color: black; border-width: 1px 1px 1px 1px;">Text5</td>
    </tr>
    <tr>
    <td style="border-style: solid; border-color: black; border-width: 0 1px 1px 1px;">Text3</td>
    <td width="010">&nbsp;</td>
    <td style="border-style: solid; border-color: black; border-width: 0 1px 1px 1px;">Text6</td>
    </tr>
    </table>[/code]

    Success
    Copy linkTweet thisAlerts:
    @ljablauthorMar 25.2015 — Thank you, both methods work!

    What I noticed is that the four parameters of border-width can be all 1px (without 0px in some positions), and the table is displayed in the same way:
    [code=html]
    border-width: 1px 1px 1px 1px;
    [/code]
    I have to check the four parameters' meaning, and maybe I will understand these "0px" in various positions. Once again, thanks!
    Copy linkTweet thisAlerts:
    @coderunnerMar 25.2015 — You even can make it shorter
    [code=html]<table width="300" border="0" style="border-collapse: collapse;">
    <tr>
    <td style="border: 1px solid black;">Text1</td>
    <td width="100">&nbsp;</td>
    <td style="border: 1px solid black;">Text4</td>
    </tr>
    <tr>
    <td style="border: 1px solid black;">Text2</td>
    <td width="100">&nbsp;</td>
    <td style="border: 1px solid black;">Text5</td>
    </tr>
    <tr>
    <td style="border: 1px solid black">Text3</td>
    <td width="010">&nbsp;</td>
    <td style="border: 1px solid black;">Text6</td>
    </tr>
    </table>[/code]

    Change all[code=html]border-style: solid; border-color: black; border-width: 1px 1px 1px 1px;[/code]into[code=html]border: 1px solid black;">[/code]

    Explanation of border-width[code=html]border-width: 1px 1px 1px 1px;
    border-width: top px left px bottom px right px;[/code]

    Hope this will help you.

    Success
    ×

    Success!

    Help @ljabl spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.17,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...