HTML Table Generator with CSS

Free HTML Table Generator with CSS Style Sheet

Customizing you html table to look just right can be a time consuming task. Different CSS styles like "border-style" and "border-width" can conflict with each other to give undesirable results. The HTML Table CSS Style Generator allows you to tinker with different settings and allows you to see the results immediately. Using the table generator can be helpful if you know your stuff, or you are just learning about html tables, and how to use cascading style sheets to get the right look for your web pages.

Many of the possible options are presented. Make your selections in the control form and press "Generate" to submit your changes and see the results. The source code for the resulting table and css are displayed for easy copying.

Widths and heights can be specified as points, pixels or percentages (like 100px, 100pt, 80%).
Colors can be specified by color or Hex RGB values (like "red", rgb(255,255,255), or #800000).
Other settings like "border-style" can be selected from dropdown menus.

Using the Generated Table and CSS Code

Each time you click on the "Generate" button, your configured settings will be used to generate a table similar to the one at top right of the graphic below. After you have your table about how you want it, save the text on the left side to a .css file (MyCSSFile.css for example). Then save the text on the right side to your html file. Finally, be sure to use code similar to the section below to connect the two together.

     <HEAD>
        <LINK REL='stylesheet' TYPE='text/css' HREF='MyCSSFile.css'>
     </HEAD>

Click here to run the HTML Table CSS Style Sheet Generator.