How To Make Tables in CSS

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.

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:

HTML Code

8

Enter the opening "

" tag and add the "table" class rule. This assigns the table's style. For example:


9

Enter the opening "

" unordered list tag. This begins the first column of your table.
10

Enter the opening "

• " list item tag and add the "headings" class rule. This assigns the list heading's style. For example:
  

• 11

  Enter the list item's text and close the "

" tag. The text is your column's first heading. For example:

• Column 1
12

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:


• Row 1, Column 1


• Row 2, Column 1


• Row 3, Column 1
13

Enter the closing "

" tag to complete the first column of your table.

14

Repeat steps two, three and four to add additional columns and rows to your table, if needed. For example:




• Column 2


• Row 1, Column 2


• Row 2, Column 2


• Row 3, Column 2



15

Enter the closing "

" tag.

16

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