Image on left and 5 rows on the right

Hi,

thanks for your question.

I’m not sure that a table is the (semantically) best choice for this (compared to other HTML elements), but it should be not problem to do this by using the “rowspan” feature.
On the “Edit” screen, just use the “rowspan” button a couple of times, to merge the cells in the first column. You’ll then have one cell in the first column and (for example) five cells in the second column.

Regards,
Tobias

Thanks Tobias,
you are the best. Looking forward your premium product coming up.

May I just ask a question?
You say:
“I’m not sure that a table is the (semantically) best choice for this (compared to other HTML elements)”

What would be the best choice to integrate this sort of elements inside my articles?

Thanks
D

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Better HTML for this would probably be to use <div> elements as wrappers, or maybe even a list (with <ul> and <li> elements), for the items on the right side.
Then, you could position the image on the left with some CSS.

This will require some (small) custom programming with HTML and CSS though, so if you are uncomfortable with that, just stick with the table.

Regards,
Tobias

Thanks Tobias,

I’m sure I have read this somewhere in your faq, so I apologize for asking it here but how do I get rid of the horizontal lines and display the vertical ones instead?

Thanks
D

Hi,

to get rid of the horizontal lines, in favor of vertical border lines, please try adding this code to the “Custom CSS” textarea (don’t forget to change the table ID as necessary):

.tablepress-id-123 tbody td,
.tablepress-id-123 thead th {
        border-top: 0;
        border-left: 1px solid #dddddd;
}
.tablepress-id-123 tbody td:first-child,
.tablepress-id-123 thead th:first-child {
        border-left: 0;
}

Regards,
Tobias