CSS-Lesson 14

The list-style-position property

The number/bullet/etc is placed a little further away from the list item with the 'outside' value than with the 'inside' value, thus:

inside outside
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  1. item 1
  2. item 2
  3. item 3
  4. item 4

The list-style property

The list-style property is a shorthand version for type, image and position.

Tables

The table-layout property

The 'table-layout' property, which has two values, 'auto' (default) and 'fixed', does not work in all browsers. The 'auto' value gives column widths which are determined by the cells in all rows. The 'fixed' value gives column widths which are determined by the cells in the first row only. This makes for a faster, but less tidy table. E.G.

table-layout: auto;

Col 1 Col 2
items 1, 2, & 3 item A
item 4 items B, C, & D
item 5 item E


table-layout: fixed;

Col 1 Col 2
items 1, 2, & 3 item A
item 4 items B, C, & D
item 5 item E

The caption-side property

The html tag <caption> is used to place the caption text for a table directly above it. The CSS property 'caption-side' property is used to place the caption text for a table on any of the four sides. The values are:

Example
A,B C,D
E,F G,H
Previous Lesson previous lesson next lesson Next Lesson