Create Amazing Looking Custom Tables For Wordpress

Create your custom Amazing looking table here

Include Images?

Table Code is Generated Below

You can copy your Custom Table code from the box below after generating.

---

Steps to use this table functionality

Follow the steps below once to make this table functional for your website.

Step 1: (Only once per website)

Copy the css from below and paste it at Wordpress Dashboard>Appearance> Customize> Additional CSS (At the end if there is already css there).

/*Additional Custom Table css*/ .mycustom-table {border-top-left-radius: 20px;border: 3px solid #038d41;}.mycustom-table tbody tr {border-bottom: 1px solid black;}.mycustom-table tbody tr:nth-child(even){background: #b8eace;}.mycustom-table td{padding: 12px 12px;}.mycustom-table th{background: #038d41;color: #fff;text-align: center;padding: 15px;border-bottom: 1px solid yellow;}.mycustom-table thead tr:first-child th:first-child{background: #b8eace !important;border-radius: 20px;color: #038d41;}.mycustom-table td:first-child {background: #038d41;color: rgb(243, 246, 247);}@media (max-width:600px){.mycustom-table{font-size: 0.8em;}.mycustom-table td{padding: 5px;}}.jmp-btn {display: inline-block;background:#038d41;padding: 5px 5px;margin: 10px 5px;text-align: center;box-shadow: 0 0 10px rgb(32, 32, 32);transition: box-shadow 0.4s;}.jmp-btn:hover {box-shadow: none;}a.jmp-btn {color: rgb(243, 239, 239);text-decoration: none;}.hide {display: none;}select {height: 3.5em;width: 100%;font-size: 0.8em;font-weight: bold;color: #038d41;text-align: center;white-space: normal;cursor: pointer;}select:hover {background: #b8eace;}option {font-size: 1.2em;word-wrap: wrap;word-break: break-all;}.pimage{max-width: 100%;height:auto;border-radius: 30%;box-shadow: 0 0 10px rgb(19, 157, 60);}

If you have already done the step once, you don't need to do it ever again on the same website.

Step 2:

• Copy a table created in google docs/MS-Word to your Guttenberg Editor.
• Make sure that you are using header in your table. (You can select that from the Block Elements at the right side)
• For the last row of the table, hyperlink your texts (if you want buttons for the last row).
• Make sure that your table has the same format as> First Row as header row and first column as the Parameters/Specs that you are comparing and Links to only last row if you want buttons.

Step 3:

Now once you have your normal table visible in the Guttenberg editor, click anywhere on the table and then click on the 3 dots present on the top right of the table and click on> Edit html and copy the whole html code of your table.

Step 4:

• Copy the code in the First text box above and click on Build Code button.
• Your code will be generated in the second textbox and then click on the Copy Code button.
• Now replace your old table code in your Page/Post with the new code and save.

Congrats...! Your new custom table is ready.