Center table name and description

  • Resolved actronab

    (@actronab)


    4 years, 1 month ago

    Hey there,

    I’d like to display the table name and description under each table like this:

    Earnings: Monthly income by region in 2020.

    I managed to define both components as inline elements, however, now I cannot center them under the table, because they lack a wrapping element. This is my current CSS definition:

    .tablepress-table-name {
	font-size: .7em;
	font-weight: bold;
	display: inline;
}

.tablepress-table-name:after {
	content: ': ';
}

.tablepress-table-description {
	font-size: .7em;
	display: inline;
}

    Unfortunately, the table name is defined as a h2 caption (block element) and there is no wrapper around name and description.

    Would it be possible to wrap all elements that are displayed before and after tables in wrapper elements for semantic reasons, so that they can be styled more easily? E.g. introduce .tablepress-table-before and .tablepress-table-after wrappers that have no style on default, but wrap around name and description, depending on whether they are positioned above or below of the table.

    Get what I mean?

    Kind regards,
    Bernd

    • This topic was modified 4 years, 1 month ago by actronab. Reason: Edited blockquote
Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    I’m not sure that these extra elements are necessary. Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter actronab

    (@actronab)

    No, unfortunately I can’t. I’m still testing the plug-in locally in my dev environment.

    But I simply created a table, chose to print both table name and table description under the table and then added the CSS code, I already mentioned above, to style the caption.

    It is all printed in one line now, as desired, but always aligned to the left. However, I’d like to center the line that contains the table’s name and description.

    I’ve tried to work my way around with text-align: center; ans also tried to center with margin: 0 auto; but had no luck yet. In my opinion a wrapping parent element is missing to properly center the elements.

    But if you know a workaround that does not require additional elements, go ahead, I’m listening! ??

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    can you try setting

    display: block;

    instead of inline? That’s sufficient for me in my tests to be able to use

    text-align: center;

    then.

    Regards,
    Tobias

    Thread Starter actronab

    (@actronab)

    Hello,

    but turning both elements to display: block; will separate them and table name and description will no longer be in the same line. Or am I missing something? That’s why I altered the display attribute in the first place.

    I want the table caption to look like this:

    Earnings: Monthly income by region in 2020.

    Where “Earnings” is the table name and “Monthly income by region in 2020.” is the table description. This works fine, I just cannot center the entire caption this way.

    Kind regards,
    Bernd

    • This reply was modified 4 years, 1 month ago by actronab. Reason: Edited blockquote
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    ah, ok. Now I understand what you are trying to achieve here! ??

    Unfortunately, I don’t see a quick solution without a wrapping element here, indeed. But then: Why don’t you simply put “Earnings” at the beginning of the table description and only print the description?

    Regards,
    Tobias

    Thread Starter actronab

    (@actronab)

    Nah, for semantic reasons I’d rather like to keep the table name and description separated. That’s why I came up with the idea to wrap elements before and after the table in a wrapper element, so that developers can style the components, if they like to do so.

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    ok, I see. Right now, the only idea I have would be to add a wrapper element around everything (name, description, and table), via the tablepress_table_output plugin filter hook. That’s what the TablePress Responsive Tables Extension (see https://tablepress.org/extensions/responsive-tables/ ) does for the scroll mode.

    Regards,
    Tobias

    Thread Starter actronab

    (@actronab)

    Hello,

    why not wrap elements before and after the table individually? I think it might cause further trouble, if the table is included in the wrapper as well (in terms of alignment and positioning).

    Or are you afraid of breaking downward compatibility by introducing two wrappers?

    Visually, they should not bother too much, if you chose an inline element (like <span>) with no styling, don’t you think so? Those who need it, could however use those wrappers for individual styling.

    Kind regards,
    Bernd

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    yes, I’m a bit afraid of possible compatibility issues, as this would be a markup change compared to the current behavior.
    Also, the demand for this is pretty much non-existent (your question basically is the first one ?? ), but it would then add extra HTML code for everybody.

    Another approach could be to add extra filter hooks, which would also add more flexibility (in terms of what markup is to be added). That said, you could maybe also use the mentioned tablepress_table_output hook and do some simple string search/replace in order to add the extra elements.

    Regards,
    Tobias

    Thread Starter actronab

    (@actronab)

    Hello,

    okay, I see. What about an option to enable or disable the additional wrappers? This way you wouldn’t break downward compatibility for existing installations, but introduce more flexibility to style the table layout, if desired.

    I mean, I could fork your plug-in at any time to introduce custom markup, but I’d like to stick to your stock implementation, so that I can benefit from further updates and security fixes.

    Kind regards,
    Bernd

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    I’m not a fan of options here, to be honest. I prefer to the WordPress mantra “Decisions, not options.” (see https://www.ads-software.com/about/philosophy/#decisions ). Every additional checkbox would make things more difficult for new and inexperienced users.
    If things need to be optional, I prefer the method of using a plugin filter hook. That’s also not too difficult (often just one line of code in the theme’s “functions.php” file), and does not unnecessarily clutter the user interface.

    In your case, I would really recommend using the tablepress_table_output plugin filter hook. You could simply use the PHP str_replace() function and search for <h2 class="tablepress-table-name and replace it with e.g. <span class="wrapper"><h2 class="tablepress-table-name. In the same way, you could search for </span><table and replace that with </span></span><table.

    Regards,
    Tobias

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Center table name and description’ is closed to new replies.