Table with CSS Styles

WordPress can help you to have a unique data table of all your products and create it useful, comfortable for you. For those who think that pictures are heavy, or already have all tips and additions and feel thirsty for new abilities, they have come. If you know CSS a little – you will definitely like a table with CSS styles! Table with CSS styles is one of the variants in the great variety of tables, made by Supsystic! Data Table Generator by Supsystic – a big, huge and very cheap CSS table maker for your WordPress site, blog or any other page!

Approximate solution is shown below. So, you can completely change the design and appearance of the table using CSS Style Editor!

In order to create such amazing Data Table you need:

    1. On the left navigation menu click “Add new table”.
    2. Enter the name of table and choose the number of rows and columns.
    3. Click “Save” button.
    4. Open “Editor” tab in the table parameters.
    5. Add data to the table.
    6. Open “CSS” tab in the table parameters.
    7. Type the parameters for the table elements in CSS editor.
Important! Any table has its unique identificatory, wich written at the first lines of the editor. Use it before every table element wich you want to be modified.
    1. Set other table properties and settings.
Important! After changing the data of table don’t forget to click “Save” button. Don’t forget, that WordPress Data Table Generator plugin can keep your future table with CSS styles only after saving it and refreshing the page!

For this table we using next CSS styles:
#supsystic-table-13 {
padding-top: 10px;
}
#supsystic-table-13 thead th:first-child {
border-left: black 1px solid;
}
#supsystic-table-13 thead th {
background-color: #bacef5;
border-top: black 1px solid;
border-right: black 1px solid;
text-align: center;
font-family: Verdana;
font-size: 16px;
}
#supsystic-table-13 tbody .odd {
background-color: rgba(133,170,210,0.12);
}
#supsystic-table-13 tbody .even {
font-style: italic;
}
#supsystic-table-13 tbody td:first-child {
border-left: black 1px solid;
}
#supsystic-table-13 tbody td {
border-right: black 1px solid;
}

Data Table by Supsystic is perfectly capable to extend table functionality to your WordPress site. Take a closer look at all Data Table Examples for WordPress.

For the additional info, general requirements of this plugin and some other questions, FAQs, forums – check out our main page: WordPress Data Table Generator.

Even if you don’t know CSS or HTML, or haven’t other IT knowledge it’s not a reason for not creating the data table! Table with CSS styles can be made by the plugin – your task would be only to customize it, change tons of options for your purpose and get the result.

You will easily and quickly LOVE how easy it is to input data and move data around – the links, products, services and all other points of your site – you will understand that it is fantastic! The code would look perfectly fine any case, but the table with CSS styles has an option for editing it too. In addition, you can change literally everything in CSS table design and size, table shape and amount. Make it as you want and make it quickly.

Get plugins bundle today and save over 80%