1 September 2021

A Useful Device Begin by downloading the files shell.html and tables.css.

Meet the comment tokens


<!--          .....       -->

Anything between matching comment tokens is ignored by the browser. Here are some potential uses.

You can make notes on the page and include stuff such as its creation date, or when it was last revised.
If something isn't working, you can "comment out" segments of code to help isolate the problem.

Making Tables

Download this file and name it tables.css.


table, th, td
{    
    border: solid 1px black;    
    border-collapse:collapse;
}
table
{    
    margin-left:auto;    
    margin-right:auto;
}
th, td
{    
    padding:.5em;
}
th
{    
    background-color:#FFFF00;
}

Get this file.


<!doctype HTML>
<html lang="en">
<head>
    <title>PUT TITLE HERE</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="table.css"/>
</head>
<body>
    <h1>PUT PAGE HEADING HERE</h1>
</body>
</html>

What the heck is all of this? Tables provide a means of displaying data on web page. First, let us meet the tags that make up an HTML table.

table Delimits a table
tr Delimits a table row
th Delimits a table header
td Delimits a table datum
thead (optional) Delimits the table head
tbody (optional) Delimits the table body

What does the CSS File Do? Let's look at a piece

table, th, td
{    
    border: solid 1px black;    
    border-collapse:collapse;
}

The comma-separated list is the selector.  
The curly brace starts the style rules.
This rule puts a border on cells.
This rule collapses borders.
The curly brace ends the style rules.

Selectors select elemeents from the document tree. Then the rules below are applied to those elements. Here we select by tag type. There are other ways to select elements (later).

This is the HTML file we produced today. It has two tables in it. You can use an empty paragraph to keep tables from touching.


<!doctype HTML>
<html lang="en">
<head>
    <title>Table Demonstration</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="tables.css"/>
</head>
<body>
    <h1>Table Demonstration</h1>

    <table>
        <tr>
            <!-- this makes a cell span 3 columns  -->
            <th colspan="3">Table of Powers</th>
        </tr>
        <tr>
            <th>x</th>
            <th>x<sup>2</sup></th>
            <th>x<sup>3</sup></th>
        </tr>
        <tr>
            <td>0</td>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>    
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>4</td>
            <td>8</td>
        </tr>
    </table>

    <p>Here is a demo of rowspan</p>

    <table>
        <tr>
            <th colspan="2">Table with rowspand and colspan</th>
        </tr>
        <tr>
            <td rowspan="2">Tall Cell</td>
            <td>top right</td>
        </tr>
        <tr>
            <td>bottom right</td>
        </tr>
    </table>
</body>
</html>