HTML Table Style Generator

Thanks man. This is cool.

Nice work !

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!

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;
}

:} 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.

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!

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.

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

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

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!

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.

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?

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!

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

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

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

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.

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

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.

Thank you, nice done. I’ll make sure to give the tool some link appreciation :-) Pingback: Delicious Bookmarks for July 2nd through July 3rd « Lâmôlabs

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.

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

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

Amazing tool, just reduces my work time into quarter. Thanks a lot

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!

Is there anyway to resize the columns?

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.

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!

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

Thanx but its not working on blogger properly !

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

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

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!

the code should be in good order

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

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.

Are you referring to custom_functions.php file?

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 :-)

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.

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

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

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

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 %.

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..

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

<table style="width: 970px; height: 69px;" border="0">
  <tr>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
  </tr>
  <tr>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
    <td>MOUNTINGS EQUIPMENT</td>
  </tr>
</table>

Regards Peter

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?

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

excellent work dear!

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.

how to use this in asp.net griview

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 :(

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:

<table id="tabelle">
  <thead>
    <tr>
      <th>header</th>
      <th>header</th>
      <th>header</th>
      <th>Link</th>
      <th>header</th>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>2</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
    </tr>
  </tbody>
</table>

This before closing body:

<div id="paging">
  <form>
    <img src="first.png" class="first" />
    <img src="prev.png" class="prev" />
    <input type="text" class="pagedisplay" />
    <img src="next.png" class="next" />
    <img src="last.png" class="last" />
    <select class="pagesize">
      <option selected="selected" value="5">5</option>
      <option value="10">10</option>
      <option value="15">15</option>
      <option value="20">20</option>
    </select>
  </form>
</div>

<script>
  $(document).ready(function () {
    $("#tabelle")
      .tablesorter({ sortList: [[0, 0]] })
      .tablesorterPager({ container: $("#paging"), size: 5 });
  });
</script>

bye

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

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

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??????

Just wanted to say thanks!

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?

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

very usefull and very cool

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?