Posted 3 months 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!
Posted 3 months 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)
Posted 3 months 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.
Posted 3 months 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.
Posted 3 months 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...
Posted 3 months 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;
}
Posted 3 months 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
Posted 3 months 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!)
Posted 3 months 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.
Posted 3 months 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
You must log in to post.
