Lists and tables

Most of the content within lists and tables is text, and so everything we've already covered applies. Lists and table have some very specific characteristics to them however.

• Unordered lists
• have these bullet things
• and have spacing / indentation

1. Ordered lists have similar
2. characteristics, and also have built in
3. numbering systems that can be controlled

List Bullets and Numbers

The choice of which symbol to use for individual list items is controlled with the list-style-type attribute. For both unordered and ordered list, there are actually quite a number of choices. The list-style-type is placed on the ul, ol, and dl elements, not the li element. Here's some examples - using the style attribute only to save some space in the text.

<ul style='list-style-type: square'>

• Square Unordered Item 1
• Square Unordered Item 3
• Square Unordered Item 3

<ul style='list-style-type: circle'>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3

<ul style='list-style-type: disc'>

• Disc Unordered Item 1
• Disc Unordered Item 3
• Disc Unordered Item 3

<ul style='list-style-type: none'>

• None Unordered Item 1
• None Unordered Item 3
• None Unordered Item 3

<ol style='list-style-type: decimal-leading-zero'>

1. Leading Zero - 1
2. Leading Zero - 2
3. Leading Zero - 3

<ol style='list-style-type: upper-alpha'>

1. Upper Alpha - 1
2. Upper Alpha - 2
3. Upper Alpha - 3

<ol style='list-style-type: lower-alpha'>

1. Lower Alpha - 1
2. Lower Alpha - 2
3. Lower Alpha - 3

<ol style='list-style-type: upper-roman'>

1. Lower Roman - 1
2. Lower Roman - 2
3. Lower Roman - 3
4. Lower Roman - 4
5. Lower Roman - 5
6. Lower Roman - 6

We can also create and use our own symbols:

ul {
  list-style-image: url('../images/star.png');
}

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3

List indentation

List elements have clear indentation on the left side, and this is controlled by padding, which we will see in the next chapter in more detail. We can alter the padding by specifying padding-left values, as a CSS height.

<ul style="list-style-image: url('../images/star.png')">
<li style='padding-left: 10em'>Circle Unordered Item 1</li>
<li style='padding-left: 5em'>Circle Unordered Item 3</li>
<li>Circle Unordered Item 3</li>
<li style='padding-left: 0em'>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

We can also add padding to the ul or ol elements themselves, which creates consistent padding throughout the list:

<ul style="padding-left: 10em; list-style-image: url('../images/star.png')">
<li>Circle Unordered Item 1</li>
<li>Circle Unordered Item 3</li>
<li>Circle Unordered Item 3</li>
<li>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

Notice that in when we set the padding of the ul element though, the markers move with the text, where when we set the padding of the li element it did not. This is because by default, the markers are part of the li element. When adding padding to the parent (ul), it's creating space between the interior of the ul and the exterior of the li. That can be more easily seen when we draw borders around the elements (we'll also see a lot more on borders in the next chapter).

<ul style="border: thin solid yellow; padding-left: 10em; list-style-image: url('../images/star.png')">
<li style='border: thin solid red'>Circle Unordered Item 1</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

Notice that the markers are outside the li, but move with the li. We can also modify this, and specify that the dimensions should be calculated with the list markers inside the li elements using list-style-position - although this isn't all that common.

<ul style="border: thin solid yellow; padding-left: 10em;list-style-position: inside; list-style-image: url('../images/star.png')">
<li style='border: thin solid red'>Circle Unordered Item 1</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
<li style='border: thin solid red'>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

To color list element, we can add background-color to the li elements, or the ul/ol containing elements. This is also where the difference between inside and outside for markers plays a role in rendering.

<ul style="background-color: green; padding-left: 10em;list-style-position: inside; list-style-image: url('../images/star.png')">
<li style='background-color: teal'>Circle Unordered Item 1</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

<ul style="background-color: green; padding-left: 10em;list-style-position: outside; list-style-image: url('../images/star.png')">
<li style='background-color: teal'>Circle Unordered Item 1</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
<li style='background-color: teal'>Circle Unordered Item 3</li>
</ul>

• Circle Unordered Item 1
• Circle Unordered Item 3
• Circle Unordered Item 3
• Circle Unordered Item 3

By playing around with padding, marker positions, and the markers themselves, you can create a near infinite number of list designs with CSS>

Table cells

Table sizing work the same way as sizing any other block element, and we'll discuss it more detail during the next chapter. Table cells, the td elements also can have padding, which is common to all HTML elements (more in the next chapter). Tables have some unique properties however, which govern the spacing between cells.

Like any other block element, we can use text-align on the td, tr, th, etc elements to control the horizontal alignment of text.

<table style="width:100%">
    <tbody>
        <tr>
            <td style="text-align: left">Left</td>
            <td style="text-align: center">Center</td>
            <td style="text-align: right">Right</td>
        </tr>
    </tbody>
</table>

The vertical alignment of text can also be adjusted with the vertical-align property:

<table style="width:100%">
    <tbody>
        <tr>
            <td style="height:100px; vertical-align: bottom">Bottom</td>
            <td style="height:100px; vertical-align: middle">Middle</td>
            <td style="height:100px; vertical-align: top">Top</td>
        </tr>
    </tbody>
</table>

Table borders

We will cover borders in general in the next chapter, however table cells, rows, and the tables themselves may have borders set. The border-collapse attribute controls whether or not adjacent cells share the same border.

table {
    border-collapse: separate;
}

table {
    border-collapse: collapse;
}

The spacing between cells only exists with border-collapse set to separate. When that is set, you can control the spacing using the border-spacing property:

table {
    border-collapse: separate;
    border-spacing: 20px;
}

As described earlier, to control spacing within the table cells, you will use margin and padding, which is discussed in the next chapter.

Table Colors

Table cells, rows, and tables themselves can have background colors. In conjunction with border spacing, we can see how they all interact with each other:

    /* The entire table set to teal */
    table {
        background-color: teal; 
        border-collapse:separate; 
        border-spacing: 20px; 
        width:100%
    }
    /* The first row is set to have green background */
    tr:first-child {
        background-color: green; 
    }

    /* Second column in second row set to yellow */
    tr:nth-child(2) td:nth-child {
        background-color: yellow; 
    }

Responsive Tables (prelude)

In the next chapter, we will be talking a lot more about responsiveness in CSS design. The concept refers to the idea that CSS should allow HTML elements to respond to changing device sizes in a way that preservers functionality. Perhaps no other element highlights the need for responsiveness more than the table element. On small screens, tables often do not have enough space to grow. This leads to extremely difficult to use pages, with tabular data forcing the user to scroll awkwardly to the left and right, and also creating text wrapping issues within the table - where columns try to become so small that text wraps to the extent that even small words are broken up.

A better design is to allow for comfortable horizontal scrolling - allowing the table to occupy more horizontal space than given, so the content within the cells reads more reasonably. This is done by wrapping the table in another block element, and setting the overlow-x to auto to allow for horizontal scrolling. The wrapper will occupy 100% of the horizontal space, while providing scrolling for the wider table.

<!-- Remember, we're only using the style element to save space
     in the textbook, we should be setting this otherwise.
-->
<div style='overflow-x:auto'>
    <table border="1">
        ...
    </table>
</div>