Lists, Tables and CSS Borders

I. Learning Objectives:

By the end of this tutorial, you will be able to:

Create numbered lists, bulleted lists, description lists and nested lists.
Create tables, combine rows within tables and/or combine columns within tables
Apply CSS formatting to lists, tables and to data within tables.
Use CSS 3 styles for newspaper columns: column-count, column-gap and column-rule.

II. Working with HTML Lists

You can insert 3 different kinds of lists in an HTML document:

1. numbered lists (also called ordered lists)

2. bulleted lists (also called unordered lists)

3. description lists

A Ordered List (numbered list)

Displays items in numeric order (numbers are inserted by HTML code and will appear slightly indented). This type of list should be used when the order of the items matters.

Example of an Ordered List

Add 1 1/2 cups flour

Add 1/4 cup cocoa

Add 1/2 cup sugar

Ordered lists begin with the <ol> tag.

Each line within the list begins with <li> and ends with </li>. When you view the document in a web browser, the first <li> will display as the number 1. The second <li> will display as a 2. and so on.

When all lines within the list have been entered, the </ol> tag indicates that the list is finished.

<ol>
    <li>Add 1 1/2 cups flour</li>
    <li>Add 1/4 cup cocoa</li>
    <li>Add 1/2 cup sugar</li>
</ol>

The default is for a numbered list, you can change the type of list using the type attribute OR the css list-style-type property.

1) type attribute

Syntax: type="value"

Where value can be:

type="1" regular number
type="A" uppercase letters
type="a" lowercase letters
type="I" uppercase roman numerals
type="i" lowercase roman numerals

Example:

<ol type="i">
    <li>Add 1 1/2 cups flour</li>
    <li>Add 1/4 cup cocoa</li>
    <li>Add 1/2 cup sugar</li>
</ol>

Here's how it looks live:

Add 1 1/2 cups flour
Add 1/4 cup cocoa
Add 1/2 cup sugar

To try this online, go to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered_numbers Change type= to A and click run, then change it to I (uppercase letter i) and click run

2. list-style-type css property

The other way to change the default list style is to use css.

Syntax: list-style-type:value

Where value can be:

lower-roman
upper-roman
lower-alpha
upper-alpha

Examples:

<ol style="list-style-type:lower-alpha;">
    <li>Add 1 1/2 cups flour</li>
    <li>Add 1/4 cup cocoa</li>
    <li>Add 1/2 cup sugar</li>
</ol>

Here's how it looks live:

Add 1 1/2 cups flour
Add 1/4 cup cocoa
Add 1/2 cup sugar

To try this live, go to: https://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

B Unordered List (bulleted list)

Displays items with bullets next to them. This type of list should be used when items have no specific order. Instead of using the <ol> tag to begin the list, use the <ul> tag instead along with the </ul> tag to end the list.

Example of an Unordered List

Add 1 1/2 cups flour

Add 1/4 cup cocoa

Add 1/2 cup sugar

Code used to generate the list:

<ul>
    <li>Add 1 1/2 cups flour</li>
    <li>Add 1/4 cup cocoa</li>
    <li>Add 1/2 cup sugar</li>
</ul>

You can change the default bullet style using the list-style-type property

Syntax: list-style-type:value

Where value can be: disc, circle or square

Example:

<ul style="list-style-type:square;">
    <li>Add 1 1/2 cups flour</li>
    <li>Add 1/4 cup cocoa</li>
    <li>Add 1/2 cup sugar</li>
</ul>

Here's how it looks live:

Add 1 1/2 cups flour
Add 1/4 cup cocoa
Add 1/2 cup sugar

To see how the different list-style-type's look online, go to: http://www.w3schools.com/css/tryit.asp?filename=trycss_list-style-type_ex

C Description List

Used for a list of words followed by their definitions or descriptions. Descriptions are displayed below terms and slightly indented.

Description lists begin with the <dl> tag.
Each term begins with <dt> and ends with </dt>.
Each description begins with <dd> and ends with </dd>
When all lines within the list have been entered, the </dl> tag indicates that the list is finished.

<dl>
    <dt>Flour</dt>
            <dd>White substance commonly used in baking</dd>
    <dt>Cocoa</dt>
            <dd>Chocolate additive </dd>
    <dt>Sugar</dt>
            <dd>Sweetener commonly used in baked goods</dd>
</dl>

How the list above would look live online:

Flour

White substance commonly used in baking

Cocoa

Chocolate additive

Sugar

Sweetener commonly used in baked goods

To try this live, online go to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_description

D Nested Lists

This occurs when you have a list within a list.

Code Example:

<ol>
<li>Item 1</li>
        <ul>
            <li>bulleted item 1</li>
            <li> bulleted item 2</li>
        </ul>
<li>Item 2</li>
</ol>

How this would look online:

Item 1

bulleted item 1

bulleted item 2

Item 2

It is important that you remember to insert the closing tag for the nested list (if you don't the web browser may get confused and not display the nested list correctly).

To see an interactive example live, go to: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_nested

III. Border CSS Properties

Borders are used in tables and in any section of a web document you want to draw attention to.

Popular border properties include:

border-width - width of the border's edge typically specified in pixels. Example: border-width:5px

border-color - color of the border specified using a color name, hex# or rgb value. Example: border-color:blue or border-color:#336699

border-style - type of line used for the border. Values can include: solid, double, dashed, dotted, groove, ridge, inset, outset or none. Example: border-style:groove or border-style:dotted

Here is an example showing style="border-width:10px; border-color:#336699;border-style:groove;"

Here is an example showing style="border-width:5px; border-color:green;border-style:inset;"

border-left - specifies the size of the line on the left, typically specified in pixels. Example: border-left:2px

border-right - specifies the size of the line on the right, typically specified in pixels. Example: border-right:4px

border-top - specifies the size of the line on top, typically specified in pixels. Example: border-top:none or border-top:2px

border-bottom- specifies the size of the line on the bottom, typically specified in pixels. Example: border-bottom:5px

Here is an example showing style="border-width:10px; border-color:#FFCC33; border-style:double;
border-left:none; border-right:none;"

border - affects all sides, allows you to set the border-width, border-color and border-style with spaces between each Example: border:5px red dashed;

This paragraph has a width of 30%, padding set to 1% and a border of 5px, red and dashed. The style is coded like this: style="width:30%; padding:1%; border:5px red dashed;"

To change settings live and see the effects, go to: http://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

IV Graphical Tables

Creating a graphical table using HTML requires the use of several different tags. Styles can be added to make the table appear more attractive and to control the placement of text within cells inside the table.

Graphical tables can include color, shading, borders and other design elements. You even have the capability of aligning text within cells and having a cell span multiple columns or rows.

Example of a Graphical Table:

Name	Class	Room#	Instructor
John Doe	Computers in Business	212	Z. Ayers
Jane Doe	English Composition I	1	M. Martin
Dolly Parton	Introduction to Welding	5	G. Grant

A. Basic Table Structure

A table structure utilizes 3 basic tags:

1) Table tags:

<table> </table> tag defines where the table begins and ends.

2) Row tags

<tr> </tr> specifies where a row within a table begins and ends

3) Column tags (also called cell tags)

There are two types of column tags:

<th> </th> tags are used for column headings typically displayed in the first row. Web browsers typically display text within these tags centered and boldfaced.

<td> </td> tags are used for columns in any row. Text within these tags is displayed normally.

Both tags specify where a cell within a row begins and ends. The number of <td> or <th> tags in a row affects the number of columns displayed.

Example of a table using these tags:

<table>
     <tr>
               <th> First cell in first row </th>
               <th> Second cell in first row </th>
               <th> Third cell in first row </th>
     </tr>
     <tr>
               <td> First cell in second row </td>
               <td> Second cell in second row </td>
               <td> Third cell in second row </td>
     </tr>
</table>

Here's how the browser would display the code entered above:

First cell in first row	Second cell in first row	Third cell in first row
First cell in second row	Second cell in second row	Third cell in second row

You'll notice that the table looks pretty boring at this point because the lines (borders) aren't displaying.

B. Table captioning

The <caption> tag is used to define text that identifies the table. The caption tag is optional. If it is used, the tag must go directly below the <table> tag. Only 1 caption is allowed per table and the caption will automatically center above the table.

Syntax:

<table>
    <caption>text to identify the table</caption>
    <tr>
        <th>column 1 heading text</th>
        <th>column 2 heading text</th>
    </tr>
    <tr>
        <td>column 1 heading text</td>
        <td>column 2 heading text</td>
    </tr>
</table>

Example of how it looks (NOTE: CSS borders have been added to the table to make it easier to read and CSS has also been applied to the caption itself to make the text larger. You will learn more about borders later in this lecture.)

Fastest Running Intervals
Date	Interval	Time
8/1/2018	Mile 3	7:45
8/2/2018	Mile 2	8:11

If you want to change the default location of the caption, you can apply CSS styling:

a) caption-side

Used to change the location to the bottom (by default, the top setting is used)

Syntax: caption-side: bottom

<caption style="font-size:1.3em;caption-side:bottom">Fastest Running Intervals</caption>

Here's how it looks live:

Fastest Running Intervals
Date	Interval	Time
8/1/2018	Mile 3	7:45
8/2/2018	Mile 2	8:11

C. Table grouping tags

Grouping tags are not required, but are useful if you have a large table that may span multiple pages. They can be used to identify the heading, body and footer portions of the table. CSS styling can be applied to grouping tags, in addition to table tags.

There are 3 tags used to identify the parts (or groups) within a table:

1. <thead> </thead>

The tag goes around the heading information (you would expect to see the <th> column tags enclosed within <thead>)

Example:

<table>
<thead>
  <tr>
<th>Month</th>
     <th>Savings</th>
  </tr>
</thead>

2. <tbody></tbody>

The tags go around the main body of the table (the portion containing all the detail information

Example:

<tbody>
  <tr>
     <td>January</td>
     <td>$100</td>
  </tr>
  <tr>
     <td>February</td>
     <td>$80</td>
  </tr>
</tbody>

3. <tfoot></tfoot>

The tags go around the summary information which is typically displayed at the bottom of the table.

Example:

Here's what the table looks like when the code is combined:

Month	Savings
January	$100
February	$80
Sum	$180

D Table Formatting

You can format the table using external style sheets, internal style sheets or inline styles.

If you are going to have multiple web pages and you want the tables to look alike, then you should use an external style sheet.
If you only want the tables in the current page to look alike, then use an internal style sheet.
If you want to override settings in a style sheet or just apply unique settings to the current table, then use an inline style.

The width, height, font-family, font-size, font-weight, color, background-color and border properties you have been working with can ALL be used with tables.

1. Setting table height and width

Height and width style rules are specified in the table tag. Most of the time, only the width is specified so the height of the table isn't limited. The width value is typically specified in a percentage or in pixels (Percentages are more flexible AND they will work well in a mobile environment. If you use pixels and you specify a number that is too large, a mobile device won't be able to display it without scrolling).

Example: <table style="width:75%;"> or <table style="width:500px;">

If you don't specify the width, the default is a width of 100%, so the table will span the width of your device.

2. Setting a border for the table

All the border properties discussed earlier can be used with tables. These properties can be used in tables to define the lines displayed inside and around the outside of the table. Any border placed in the <table> tag affects the table outline. Any border placed in a <th> or <td> tag would affect the inside of the table.