Cool Web Stuff

How often do you work with tables?

I work with them quite a bit and styling them can be tedious and buying a theme to utilize the html table layout and styles they’ve implemented can be overkill.

The other day I came across http://cssbuttongenerator.com while needing to make a quick nicely styled button (much props). The generator made styling an <a> tag so fast and easy.  I was hoping to find a generator for html tables, so I scoured the web for a bit and came up with nothing, nada.  Which led me to the choice of sacrificing my overly exciting normal weekend drudgery by creating, http://tablestyler.com a html table generator and css styler.

(Try out the http://tablestyler.com tool.)

table generator

Here are some of the Features:

  1. Font Family
  2. Table Border Width/Radius/Color
  3. Cell Padding
  4. Show/Hide Footer
  5. Header Gradient Color/Text Color/Font-Bold
  6. Show Column Lines Show/Hide/Color/Width
  7. Show Hide/Footer
  8. Alt Rows & Alt Row Colors
  9. Add/Remove Pagination
  10. Styling the Pagination
  11. Preset Color Themes

Do you have any suggestions or features you would like to see added? I’d like to hear them. Use the comment area below as a drop box or discussion area for the Table Generator.

75 Responses to "HTML Table Style Generator"

"SHARING IS CARING"
  1. Steve says:

    Thanks man. This is cool.

  2. Michael Beck says:

    Thank you, your table generator is great. One question though, how can I make the odd number rows have the background highlight past the first three rows? I’ve added a link to my site with the table on it, you can see that the highlight only applies to the first three rows, nothing after.

    Thanks!

  3. eligeske says:

    Hey Michael,

    The reason the colors are not showing up in the other rows is because the class alt is missing from table row tag. Usually they would be added server side or with client side script. But it appears that you are just manually creating your HTML. So pick the
    that should have the color and add class=”alt” it.

  4. Michael Beck says:

    Yes, I’ve already tried using the alternating class=”alt” but it does not change. The issue must be in the CSS.

    I have this at the top of my CSS:

    ul{
    list-style:none;

    I’m guessing the “none” part is my problem. I’ll have to search around. Then the rest of the CSS is below.

    .datagrid table {
    border-collapse: collapse; text-align: center; width: 100%;
    }
    .datagrid {
    font: normal 12px/150% Georgia, Times New Roman, Times, serif; background: #fff; overflow: hidden; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
    }
    .datagrid table td, .datagrid table th { padding: 6px 20px;
    }
    .datagrid table thead th {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #173622), color-stop(1, #275420) );background:-moz-linear-gradient( center top, #173622 5%, #275420 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#173622′, endColorstr=’#275420′);background-color:#173622; color:#FFFFFF; font-size: 13px; font-weight: bold; border-left: 1px solid #36752D;
    }
    .datagrid table thead th:first-child { border: none;
    }
    .datagrid table tbody td { color: #275420; border-left: 1px solid #C6FFC2;font-size: 12px;font-weight: normal;
    }
    .datagrid table tbody
    .alt td { background: #DFFFDE; color: #275420;
    }
    .datagrid table tbody td:first-child { border: none;
    }

  5. eligeske says:

    Hi Michael.

    I was looking at your website that has the table on it. It appears that your implementation of the HTML is the problem and NOT the CSS.

    Look closely and you will notice you opened the table rows twice.

    What a row should look like: <tr class="alt"><td></td</tr>
    What a row should NOT look like: <tr class="alt"><tr><td></td></tr>

    Notice the extra <tr>

  6. Michael Beck says:

    :} Thank you! It works perfectly now! It was very kind of you to take the extra time to help me here. The table looks spectacular.

  7. eligeske says:

    The pleasure is all mine!

  8. Eliot says:

    Greetings from Toronto! I never post anything on these kinds of blogs. However, I’m an amateur when it comes to HTML/CSS despite doing tons of Web development with specific products (Adobe Flex, .NET, SQL, Google Maps and other GIS products) and came across your tool. Just wanted to let you know how helpful it was. Thank you very much!

  9. eligeske says:

    Awesome! Sorry to hear you are in Canada during winter, but glad you liked the tool!

  10. Petri says:

    Thanks! This is awesome tool. Saves so much time and creates cool custom made table themes. I will be using this in my open-source project.

  11. gerry says:

    how do you re size the table? no matter what i do i cant seem to resize the whole thing.

  12. eligeske says:

    Hi Gerry,

    Actually the table never gets resized for width. The div which contains it is what should be resized.

    For example:

    .datagrid { width: 500px }

  13. gerry says:

    wow thanks, that really helped a lot ,the table looks great. this site rock!

  14. PlNG says:

    Thanks for this tool, I was looking for a complex html table generator to make such a table for table testing. It didn’t do everything initially such as adding col and colgroup elements and rowspan attributes but it did most of the legwork. I’ve keyword stuffed this comment to bump you up in the ranks. Thanks again!

  15. lifegear says:

    Great html table generator tool!
    It would be cool to also have options number of rows / columns and table width.

    thanks again for a great tool.

  16. eligeske says:

    Yo lifegear, so right… will be looking into it soon.

  17. Thomas Kainz says:

    This a great tool – thank you. One thing, though, it seems though that while the output renders fine in Firefox, in IE 8, I’m not getting the rounded corners effect. Do you have any suggestions?

  18. eligeske says:

    Hi Thomas, glad you like it. IE just never plays nice and always waits years before coming to terms with the rest of the world. That being said, ie 8 and below do not recognize the attribute, border-radius. I believe I mentioned that in the short paragraph at the top of the tool.

    Now to answer your question on how to get that to work. You would have to do some images or use some JavaScript. But in all honesty, I prefer to forget that IE8 and below ever existed and start coding for the rest of the world. (upgrade to IE9).

    If I haven’t convinced you to forget the past I will be happy to share some links on achieving your goal. Just lemme know.

  19. Thomas Kainz says:

    While I agree whole-heartedly with you and your thoughts on IE8 – especially since Microsoft seems insistent on lagging behind everyone else – in spite of the fact that they have the resources to really be leading the industry in this respects. Unfortunately clients..and I have a few… whom don’t agree and insist that it work with IE8 so if you have any practical examples of JavaScript code that won’t break your css for the other ‘normal’ browsers, by all means, steer me in that direction. I’ll be searching myself and if I find something I’ll post it so you don’t waste your time needlessly. Many thanks again!

  20. Mark says:

    great tool – but turning the footer off still leaves a little section at the bottom and sure how to resolve…

  21. Mark says:

    I would add the ability to set the row line color and thickness.

  22. great tool…very easy and quick…like it a lot

  23. David says:

    Halle-freaking-lujah!
    I had made hack version of my own, but it wasn’t quite cutting it and definitely wasn’t ready for the public. This is superb!

    1 Main addition:
    Colgroups in case styling that way is more effective.

  24. David says:

    I’ve been thinking that there needs to be some better table generators/tools in general. Particularly pertaining to SEO. I feel like tables get bad rep due to their poor use in the past, but with title tags, proper layouts, etc, they aren’t half bad. They just take a bit to get used to. (As if CSS is all that simple. )

    What I’m saying is, if I were to make a table generator geared towards SEO, and potentially specific for content creation inside the table, could I integrate your tool? Either give you credit, let you run it, or in some other fashion? Again, I’ve sort of begun but I don’t exactly have a commitment to finish anytime soon, so it may not actually happen. Either way, I highly appreciate your work!

    Thanks!
    ~David

  25. Josh says:

    Really nice tool, and for the most part, the default style is really nice already. I am making small tweaks with the GUI controls, and one nice addition might be the ability to import a modified sheet that was generated by the tool after some tweaks were made from the GUI controls.

  26. Bear says:

    Thank you, nice done. I’ll make sure to give the tool some link appreciation :-)

  27. Pingback: Delicious Bookmarks for July 2nd through July 3rd « Lâmôlabs

  28. Donnie says:

    Great tool.. Is there an easy way to get data into the table without manually entering it. I have a table with 300 rows and it would be difficult to modify each row.

  29. eligeske says:

    Is the data the same for each row? If not please explain to me where the data is coming from.

  30. Kevin says:

    A great tool saves loads of time.

    an enhancement would be the option to set column widths. Any ideas how I could do this? Not very techie when it comes to css so need all the help I can get.

    Kevin

  31. mari says:

    hello…
    im dont want to use the alternate rows, but i want to use row line color only.. how can i do that. please help me

  32. Jenny says:

    Amazing tool, just reduces my work time into quarter.

    Thanks a lot

  33. JBravo says:

    This is a super tool! I’m a beginner and I find it really helpful.
    Just wanted to ask, how do I get the pagination to work? Right now clicking on the footer does nothing.
    Also, how do I limit the number of rows per page? I have 30 rows which I want to show 10 rows at a time.
    Thanks in advance!

  34. JBravo says:

    Is there anyway to resize the columns?

  35. eligeske says:

    @Josh – I really like that Idea and will be giving that some thought here in the near future. Thanks!

    @Mark – The row lines have been added today. version 1.3 released.

    @Donnie- Thanks! Glad you like it. I will put that in my brain and kick it around on the easiest way to implement.

  36. Andrew Green says:

    Just a quick note to say thanks for this free tool. I coded a back-end reporting tool where only I see the table of data, but it was really quick, and easy to make it look cool rather than incredibly dull using your code.

  37. Gino says:

    Hi,
    I love your tablestyler! Great tool, thank you! Can you please help me with integrating the css into my stylesheet.css? I don’t know how do it :-(
    Thanks in advance!

  38. Kevin says:

    How do you override the table width. Cannot seem to get the outermost border to go away.

  39. Karan says:

    Thanx but its not working on blogger properly !

  40. Oddunity says:

    Loving you CSS output … Outstanding work! I’ve only found a few tools that will accomplish this so easily and yours is by far the best :) Although ….a nice drop shadow would be cool around the table frame .. hehe

  41. Scott H says:

    This is a great little tool. Nicely done – good job.

  42. Jan says:

    I’ve been trying a few generators over the last couple of days but none of them come close to this one. Great work! Allowing extra columns and rows within the designer is something all other developers of css generators (that I’ve come across) have missed out. Thanks, it’s a massive help!

  43. gunawan says:

    the code should be in good order

  44. S Lal says:

    Your work is just wonderful and awesome. It will do tons of good for everybody around. Your effort is admirable.

  45. Vanessa says:

    What a super cool tool!!! Can you help me get it to work properly? Once I get the code generated, is it simply a matter of copy and paste, because it is not showing up. The table I am referring to can be seen on my site on the sidebar under the “Popular Posts” heading.

    I pasted the html in that widget area and then pasted the css code in my css file.

    My speculation is that there is something left out that is keeping the two from matching up, so that the table looks like a standard table and not like the way I customized it.

  46. eligeske says:

    I see that you pasted your css into custom.css of the wordpress theme. WordPress gets kind of messy with the more plugins added.

    The .datagrid class is not being read by the DOM (web browser), probably due to some issues in syntax in the file.

    My suggestion would be to put this directly into the tag of your theme file.

  47. Vanessa says:

    Are you referring to custom_functions.php file?

  48. eligeske says:

    Depending on how the template is structured, there should be an index.php or header.php perhaps in your theme folder.

  49. Michael says:

    Hello,

    What a great tool! My only thing is how do you get the columns to be equal in size? The middle column is larger. Thx :-)

  50. Hey there,

    Nice Table and works great, just one thing.

    When having more than one column, it just so happens that the “thead” th’s develop a border around them from the second column onwards. Just put “border: none;” in you data grid class before you’re deklaring it to have a border on the left. Might not be so obvoius to inexperienced css users out there.

  51. Mike Jones says:

    I like the table but how and the heck do i get it to work on my web page, I know nothing about css. I see that by pasting the html code does nothing without the .css and I don’t know where to put the .css

  52. martzell says:

    Hello,
    great tool. Thanks for that.

    Is it possible to get the design for tables fitting to content, auto-width instead of width: 100%? I can’t get it perfect: http://www.martzell.de/2013/01/carsharing-vergleich.html

    Best regards from Germany, Martin

  53. Steve says:

    Great Tool !

    But one thing, when adding / setting the rows or column with color lines it seems that the html generator is not displaying the html code.

    Can someone please advise if we are doing something wrong or is this an issue with the generator.

    Thanks

  54. eligeske says:

    Hi Martin,

    Add this to your css.

    .datagrid table { width: 100%; }

  55. martzell says:

    Hi eligeske,

    I prefer a minimal width for tables and can’t get it perfect. My web site have no max-width yet, so tables would be to stretched when set to width: 100 %.

  56. hi! great tool..
    i have a problem though in populating data from database to the table..
    it seems it is populating in just 1 row..

  57. peter says:

    Hi eligeske,
    How do i add text under these cells in between the 2 rows….

    table style=”width: 970px; height: 69px;” border=”0″>

    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT

    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT
    MOUNTINGS EQUIPMENT

    Regards Peter

  58. Blub says:

    Hello

    I’m using 2 columns and i put the table in a smaller div….

    How can i make the line between the columns exactly be in the middle? after i entered text into the table, the line dividing the columns is not in the middle of the table anymore….. any idea?

    And what can i do to make the look of links match the look of the text?

  59. eligeske says:

    Hi,

    If you are using only two columns, look inside the thead and put width=”50%” in the first th. This should fix your issue, unless the width of your container is too small.

  60. Steffen says:

    Great! It was just what I was looking for. A great tool saved me loads of time.

    Thanks

  61. abc says:

    excellent work dear!

  62. Steve says:

    Forgive my ignorance:

    How do I adjust the width of specific columns? Some of my columns need to be a few dozen characters wide, and others only a few characters wide. When I type a few dozen characters into the cell, it expands the row vertically. I need it to make the column wider instead.

    Also, how do I set the overall width of the table? I added:

    .datagrid {width: 800px}

    per your instructions above, and while that did limit the table to 800px in width, it did so by cropping the rightmost edge of table (so I lost one of my columns and 20% of the one next to it).

    I appreciate your help. Let me know if you need screenshots or anything.

  63. Ivan says:

    how to use this in asp.net griview

  64. cy says:

    august 6th 2012: “This is a super tool! I’m a beginner and I find it really helpful.
    Just wanted to ask, how do I get the pagination to work? Right now clicking on the footer does nothing.”

    I have the same question. I know about some scripts that can make it work, but how to implement them? And I can’t get the rows/columns to become more or less :(

  65. cy says:

    I got it, but I had some help of a friend:

    So here is how you make it work with the js code inline (I had to do it that way)

    In Css change: .datagrid table tfoot li a
    To: .datagrid a

    This at beginning of head:

    here comes your CSS

    make the table like this:

    headerheaderheaderLinkheaderheader

    1datadatadatadatadata
    2datadatadatadatadata

    This before closing body:

    First
    Previous

    Next
    Last

    5
    10
    15
    20

    $(document).ready(function() {
    $(“#tabelle”).tablesorter({sortList: [[0,0]] }).tablesorterPager({container: $(“#paging”), size: 5});
    })

    bye

  66. cy says:

    well that comment didn’t turn out the way I hoped

  67. pooja says:

    This is an awesome tool… really great.. thank you!!

  68. Arslan AR says:

    Hey eligeske I See Your Table generator Its A Awesome Piece of Art I want it to Add im My Blogger Site But Can’t Tell me How i Can Add this table To my Blogger Post ?? Please Immediately When i Add the html code to blogger post and See in Compose Section I Can See Only Normal text No Styling my Browser is Also Latest So Tell me Whats the Problem??????

  69. leson says:

    Just wanted to say thanks!

  70. Leon says:

    Awesome tool, really helped me! thank you! I have one problem: how can i make some colomns bigger and some smaller? Is that possible somehow?

  71. Lotty says:

    This is a fantastic tool… but i cant see an option to center the text?

  72. bagus says:

    very usefull and very cool

  73. Marianne says:

    This is a great tool! Is this also available as a tool to download so that one can save a table with customized color scheme instead of retyping all the values again online?

  74. eligeske says:

    Hi Marianne!

    This is something that has been on my mind for a while!!! I get I’ll stop slacking and add that ability to save.

    Glad you like it!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Learning DHTMLX Suite UI

Learn the foundation of the DHTMLX Suite quickly while building a single page application with multiple components in harmony.

Popular post