WordPress.org

Ready to get started?Download WordPress

Forums

Making a special table (10 posts)

  1. bbhammer
    Member
    Posted 1 year ago #

    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!

  2. PinkishHue
    Member
    Posted 1 year ago #

    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)

  3. bbhammer
    Member
    Posted 1 year ago #

    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.

  4. PinkishHue
    Member
    Posted 1 year ago #

    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.

  5. steveredshaw
    Member
    Posted 1 year ago #

    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...

  6. PinkishHue
    Member
    Posted 1 year ago #

    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;
    }
  7. steveredshaw
    Member
    Posted 1 year ago #

    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

  8. PinkishHue
    Member
    Posted 1 year ago #

    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!)

  9. steveredshaw
    Member
    Posted 1 year ago #

    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.

  10. steveredshaw
    Member
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags