Hey Everyone,
I'm currently trying to build a table with icons in each row to add value to the benefits described.
I normally work in Marketing but somehow got this task, haha.
Anyways,
This is the site: http://ift.tt/1RO4is4
The table I'm trying to fix is the first one with the orange header.
These are the current issues:
1) Table is too wide. I tried this CSS but it didn't fix it.
#content .tablepress-id-2 { width: 70%; } tablepress-id-1 td img { border: none; padding: 0; margin-bottom: 0; }
2) There is a white line gap between columns 1 and 2 on the grey striping. I'd like to remove this and have one consistent grey line. Is this possible?
3) The last row with the call to action buttons appears to be off centered from the table. I have equalized the widths of both columns and in wordpress they appear equal. However when put over to the actual website, they don't appear as such.
If anyone has insight into how to format this correctly I would really appreciate it. I would do this in CSS but my knowledge is really limited with it and I don't know how to incorporate icons like this while keeping the site responsive.
Here is the code I have so far for my table:
<table style="height: 1752px;" width="600"> <thead> <tr style="background-color: #f09800;"> <th style="text-align: center; vertical-align: middle;" colspan="3"> <h1><span style="color: #ffffff;"><a id="moreinfo"></a>Directory Plan Features</span></h1> </th> </tr> </thead> <tbody> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="wp-image-18306 aligncenter" src="http://ift.tt/1Sui9R0; alt="mobile-icon" width="83" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Full Page Mobile Optimized Listing</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-17431" src="http://ift.tt/1RO4k2Z; alt="crew" width="100" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Add company logo/Profile Picture</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-19348" src="http://ift.tt/1Sui9R3; alt="USA Map Icon " width="100" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Listing Search by States, Cities, & Zip (Map Search Available)</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19350" src="http://ift.tt/1RO4iIo; alt="Checklist Icon (directory features) " width="256" height="256" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Listing in Multiple Trade Categories</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-19351" src="http://ift.tt/1Sui7bX; alt="Camera Icon Directory Features" width="100" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Add Unlimited Photos and Galleries</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19353" src="https://americancontractorsorganization.org/wp-content/uploads/2016/03/customer-reviews-directory-features.png" alt="customer-reviews (directory features)" width="200" height="200" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Display Customer Reviews</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-16852" src="http://ift.tt/1RO4k34; alt="Coupon-Directory-Software" width="100" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Connect to Social Media Channels</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-16526" src="http://ift.tt/1Sui7bY; alt="youtube lrg" width="99" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Link to YouTube or Vimeo Videos</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19356" src="http://ift.tt/1RO4iIt; alt="blog-submit-icon (directory features)" width="225" height="225" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Post Blogs and Trade Articles</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19358" src="https://americancontractorsorganization.org/wp-content/uploads/2016/03/Classifieds-Icon-Directory-Features.png" alt="Classifieds Icon Directory Features" width="256" height="256" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2">Post Classified Ads for Job Openings</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19359" src="http://ift.tt/1Sui9R8; alt="icon-coupon" width="309" height="309" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2"> Create and Manage Promotional Coupons</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter size-full wp-image-19360" src="http://ift.tt/1RO4k3c; alt="Member Icon Badge (Directory features)" width="272" height="272" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2"> <a id="plans"></a>Display Member Badges</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><a href="http://ift.tt/1Sui9Rb; rel="attachment wp-att-19361"><img class="aligncenter wp-image-19361" src="http://ift.tt/1Sui9Rb; alt="Certificate Icon Directory Features" width="97" height="97" /></a></td> <td style="text-align: center; vertical-align: middle;" colspan="2"> Display Certifications and Professional Associations</td> </tr> <tr> <td style="width: 100px; text-align: center; vertical-align: middle;"><img class="aligncenter wp-image-19362" src="http://ift.tt/1RO4kjs; alt="QR Code Icon" width="74" height="100" /></td> <td style="text-align: center; vertical-align: middle;" colspan="2"> Custom QR Code – Links to Your Listing</td> </tr> <tr> <td style="width: 300px; vertical-align: middle;" colspan="2"> <p style="text-align: center;"><span style="font-size: 22pt; color: #808080;"><strong>$99.99/ month</strong></span></p> <p style="margin-bottom: 5px; margin-top: -20px; text-align: center;"><span style="color: #808080;"><strong>$199 first month then $99/mo after</strong></span></p> <p class="buttonfree" style="text-align: center;"><a href="http://ift.tt/1Sui7c4 Listing</a></p> </td> <td style="width: 300px; text-align: center; vertical-align: middle;"><span style="font-size: 22pt; color: #808080;"><strong>$899.95 / year</strong></span> <p style="margin-bottom: 5px; margin-top: -20px;"><span style="color: #808080;"><strong>Best value</strong></span></p> <p class="buttonfree"><a href="http://ift.tt/1RO4kjt Listing</a></p> </td> </tr> </tbody> </table>
Epic visual tool
Epson 5030UB 2D/3D 1080p 3LCD Projector
Submitted March 29, 2016 at 06:08PM by Ownfir http://ift.tt/1ojWvEs
No comments:
Post a Comment