Lists

list-style-type

list-style-image

line-style-position

Shortcut for list-styles

list-style: [list-style-type] [list-style-position] [list-style-image]

Creating a horizontal menu with unordered lists

The key is "float:left;"

 


Tables

Styling tables is a bit more involved than working with fonts, text, lists, etc. There are so many ways to slice and dice the formatting of cells, rows, columns and the table itself. Here's a few examples to understand the IMPACT of various settings. A fully styled table is the domain of a talented designer.

Example 1

I've put a border around the entire table (border:1px solid black), AND set added a "margin" between the various borders (border-spacing:1.5em;) Caption is on bottom (caption:bottom;)

This is the caption, the style is set to caption-side:bottom;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem

Example 2

Here I applied the border to the cells instead of the entire table. You can see a 1px border space. This could be removed using the table's cellspacing='0' attribute.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem

Example 3

Here I'm applying a background-color to an entire row. Notice, we still have the 1px border space (per above). We will fix that in the next example.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem

Example 4

Here I'm applying a background-color to an entire column. I also set the cellspacing attribute to 0 on the table to remove the default 1px space between cells.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem

Example 5

In examples 5 and 6, we play with the border-collapse attribute. Setting it to separate will double the borders between the cells.

Header 1 H2 H3
Footer 1 F2 F3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem

Example 6

In this example, we set the border-collapse attribute to collapsed. As a result, there's only a 1px border around the cells.

Header 1 H2 H3
Footer 1 F2 F3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus. Lorem ipsum dolor sit amet, Lorem