Tabbed table buttons

[tobidadog]

Heyo! I'm looking to create a tabbed table like this one. Is there a base code to get tab buttons or anything like that? Thanks!

[Kami]

Apr 4, 2018 0:07:30 GMT -8 tobidadog said:

Heyo! I'm looking to create a tabbed table like this one. Is there a base code to get tab buttons or anything like that? Thanks!

I admit I'm a little confused. There are no tabbed tables on the page you linked to, so I'm not sure what you're trying to emulate.

[tobidadog]

I'm sorry let me clarify. The circled buttons in this screenshot. I would like to create a table that works in this manner. When you click on the buttons, they change without changing the page. 

[Kami]

It looks like a very CSS-heavy version of this plugin:
www.proboards.com/library/plugins/item/456

You could use that, and simply use CSS to create a similar effect.

[tobidadog]

Thank you! But, I've already tried the tabbed table plugin and it's just not as customizable as doing everything from scratch. I also downloaded the skin I screenshotted at one point and it's not the plugin, the creator appears to have coded the entire thing up themselves.

I know how to make simple tables, I just don't know how to make them switch in that fashion.

[Kami]

With all due respect, that's not wholly accurate. Perhaps it's not customisable in the fashion you wish for it to be via plugin settings, but it is possible if you target the compenents directly via CSS for each tab/tab content. The only thing that both of these things are doing are using javascript to dynamically load content (as opposed to leading you to another URL via HTML). Everything else about the way this looks is accomplished via HTML and CSS. The one on this theme, while probably not identical to the plugin, is functionally the same.

The only other thing I could direct you to would be a raw JS script for a dynamic table, which is literally all both of these things are. You'd still need to style them heavily via CSS to get the look you're wanting.

www.w3schools.com/howto/howto_js_tabs.asp

If you need help styling the plugin I'd be more than happy to assist in my spare time, or with the raw script as well, but the plugin would be much more beginner-friendly.

[Sammiie]

Hiya Kami

Thank you for getting back to Tobi on this matter! I'm also a staff on the same site we're looking to use this tabbed table on.

I've tried to stylize the plugin table via it's css components within the plugin itself. Is that different from copying the classes and plugging them into the board's css? I know I was only able to change some of the borders' colors (though not specify where I wanted borders and where I didn't) and some of the hover styles on the tabs... but I was very limited in what I was trying to accomplish.

But maybe there's a way to do it that I'm not doing

[Kami]

Sammiie - Yes, it's different. The simple explanation is that what you see available to you via plugin settings are simply what the plugin author gave you a user interface for. In the "build" mode of the plugin, what happens is that whatever values you fill in on the interface get plugged into their respective spots in the CSS that's included with the plugin.

In other words, the plugin author put in some bare-bones CSS properties into the build of the plugin, then gave users an easy interface to change those values. 

However, CSS is never limited to only a few components. If you right-click > inspect each element that is generated by the plugin (as in, you create the table, and right click on the different parts of the table) you can get the class name of that element (and perhaps its ID, it would depend on the element), and specify more in-depth properties via your forum's stylesheet. The difference is that you would have to know what you're doing with regards to CSS -- this is the reason that the UI is provided, so that individuals who are not very CSS knowledgeable can still make some aesthetic modifications to the table without having to learn CSS. It is by no means the fullest extent of the CSS possibilities.