How To Make Tables in CSS

Contributor

By Lady_Glass
eHow Contributing Writer

Article Rating:

(0 Ratings)

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.

Difficulty: Moderate

Instructions

Things You'll Need:

HTML text editor, such as BBEdit or Dreamweaver

CSS Code

Step 1

Open a new document in an HTML text editor, such as BBEdit or Dreamweaver.
Step 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;
}
Step 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;
}
Step 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;
}
Step 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;
}
Step 6

Name and save your CSS file with the ".css" extension.
Step 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

Step 1

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

Enter the opening "<ul>" unordered list tag. This begins the first column of your table.
Step 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">
Step 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>
Step 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>
Step 6

Enter the closing "</ul>" tag to complete the first column of your table.
Step 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>
Step 8

Enter the closing "</div>" tag.
Step 9

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

How To Make Tables in CSS

Things You'll Need:

CSS Code

HTML Code

References

Post a Comment

Related Ads