How To Make Tables in CSS

Sample CSS Table

Creating tables using Cascading Style Sheets (CSS) is an advanced way of displaying data or to create a page layout. CSS allows you to create cleaner code, which results in faster page loads and enables you to create more of a customized table. Using a simple HTML unordered list, CSS assigns style rules to each element to define how to display your table and present your content. Style rules can be tailor-made to allow you to create all kinds of tables, from simple to complex.

Things You'll Need

• HTML text editor, such as BBEdit or Dreamweaver

Instructions

CSS Code

1. Open a new document in an HTML text editor, such as BBEdit or Dreamweaver.

2. Create a class style rule called ".table". This rule defines your table's font. For example:
   .table {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   }

3. Create a class style rule called ".table ul". This rule defines the unordered list's margin, padding, float and border. For example:
   .table ul {
   margin: 0px;
   padding: 0px;
   float: left;
   border-top: 0px none;
   }

4. Create a class style rule called ".table ul li". This rule defines the list item's padding, list-style-type, background color, font size, bottom border, table width and background color. For example:
   .table ul li {
   padding: 5px 5px 10px 10px;
   list-style-type: none;
   background-color: #CCCCFF;
   font-size: 14px;
   border-bottom: 1px solid #FFFFFF;
   width: 150px;
   color: #000033;
   }

5. Create a class style rule called ".table ul li.heading". This rule defines the list heading's font properties, background color and bottom border. For example:
   .table ul li.heading {
   font-weight: bold;
   color: #333366;
   background-color: #9999CC;
   text-transform: uppercase;
   font-size: 16px;
   border-bottom: 1px solid #FFFFFF;
   }

6. Name and save your CSS file with the ".css" extension.

7. Link your CSS file to your HTML by opening your HTML document and adding a link within the document's "head" element. For example:
   <link href="http://www.yoursite.com/table.css" rel="stylesheet" type="text/css" media="all" />

HTML Code

1. Enter the opening "<div>" tag and add the "table" class rule. This assigns the table's style. For example:
   <div class="table">

2. Enter the opening "<ul>" unordered list tag. This begins the first column of your table.

3. Enter the opening "<li>" list item tag and add the "headings" class rule. This assigns the list heading's style. For example:
   <li class="headings">

4. Enter the list item's text and close the "</li>" tag. The text is your column's first heading. For example:
   <li class="headings"> Column 1</li>

5. Enter as many list item tags as needed. The text entered in these list items is the data that appears under column one. For example:
   <li>Row 1, Column 1</li>
   <li>Row 2, Column 1</li>
   <li>Row 3, Column 1</li>

6. Enter the closing "</ul>" tag to complete the first column of your table.

7. Repeat steps two, three and four to add additional columns and rows to your table, if needed. For example:
   <ul>
   <li class="heading">Column 2</li>
   <li>Row 1, Column 2</li>
   <li>Row 2, Column 2</li>
   <li>Row 3, Column 2</li>
   </ul>

8. Enter the closing "</div>" tag.

9. Name and save your HTML file with the ".html" extension.

Tips & Warnings

• You can add additional style specifications, such as font size or color, in each CSS rule. If you do not see the CSS rules taking effect, make sure that both files have been saved and then use your HTML text editor's "Refresh" function.

References

• CSS Table Properties

Resources

• Read this Article in Spanish
• css Zen Garden: The Beauty in CSS Design