WordPress.org

Support

Support » How-To and Troubleshooting » Making a special table

Making a special table

  • Hi

    I want to create a table resembling this (link to picture). I have tried a few plugins. However, they don’t allow border options for single cells, which is what I need to obtain the look I want.

    Does anyone have an idea on how to make a table like that?

    Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You can use CSS to achieve this. Try adding this to your theme’s CSS (or make a child theme)

    td {
    border: 1px solid black;
    }
    td.noborder {
    border: none;
    }

    Then in the HTML code for the cell’s where you don’t want a border, instead of

    <td>some text</td>

    Use:

    <td class="noborder>some text</td>

    (updated: I forgot to add the ‘none’ for the noborder version)

    Works great! However, the lines are not completely invisible. Could anyway, just curious if it is possible to make the borders truly invisible?

    And how do you merge cells?

    And a bonus question: Ho do you center align the table? Cant figure out why posting this:

    <table class="aligncenter" style="width: 350px;" border="0" align="center;">

    Makes the table look like this.

    Ahh I see, the border is set on the ‘table’ rather than the ‘td’

    Add this to your CSS:

    table.noborder {
    border:0;
    }

    Then add your HTML for the table like this:

    <table class="noborder" style="width: 350px;margin-left:auto;margin-right:auto;">

    That should align it centrally on the page.

    Tables in HTML are in decline now I believe and I’ve read they shouldn’t be used simply for displaying text/images/links in neat rows and columns (don’t know why, my understanding of coding and commands is not up to that level).

    If this is so, how can a grid of aligned rows and columns be achieved on a WordPress page. Specifically, I want to display quite a few links on a page, a menu really, but lay them out as a table would. I have not found a way to achieve this by creating a menu.

    Help and advise gratefully received…

    The thing with tables is that people used to use them to lay out their designs properly and that’s not right. If you want to use them to display a table of data, that’s absolutely fine in terms of modern standards.

    To display your menu links in columns you could style your list like so (provided the links are in a list format):

    Your HTML code would be like:

    <ul class="mycolumnlinks">
    <li><a href="somelink">A List Item</a></li>
    <li><a href="somelink">A List Item</a></li>
    <li><a href="somelink">A List Item</a></li>
    <li><a href="somelink">A List Item</a></li>
    </ul>

    And your CSS would be something like:

    .mycolumnlinks li {
    width: 50%;
    float: left;
    display: inline;
    }

    Or to be safe you could also add a set height on the list items so they don’t mess up when viewed on mobile or if some of the anchor text is longer than others, so e.g.:

    .mycolumnlinks li {
    width: 50%;
    height: 30px;
    float: left;
    display: inline;
    }

    I think that should achieve what you need. If you want it to look more table-like you can also add a border and margin to the list items, something like this:

    .mycolumnlinks li {
    border: 1px solid #000;
    margin: 1%;
    width: 48%;
    height: 30px;
    float: left;
    display: inline;
    }

    Thanks so much that is really useful. I pasted your code into my page and the css into the WP css editor, and the links displayed exactly as I wanted. However I did get the following warnings flagged up on the css editor, so presumably something about the css code is not quite correct.

    width can’t be used with display: inline
    height can’t be used with display: inline
    display: inline has no effect on floated elements

    Aah, weird. You can try removing the ‘display: inline’ as I suppose the ‘float: left’ will handle the list items sitting next to each other, and that would negate the other error too. I’ve never seen that error re: heights and widths before.

    (Will have to go and read up now, don’t want to be working with below par CSS skills!)

    No worries, it still works, even though it might not be grammatically correct (not that I know!). Thanks for your help, you have increased my knowledge and skills in building web pages.

    Just as another note on this, my layout did not work when I took out the line float: left, so your code wasjust right after all.. thanks again

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Making a special table’ is closed to new replies.