Computer Science 318

Fundamentals of Web Design

Lab 13 Tables

Goal

Learn

<table>
    <thead>
        <tr>
            <th>Header Content 1</th>
            <th>Header Content 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Body Content 1</td>
            <td>Body Content 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
           <td>Footer Content 1</td>
           <td>Footer Content 2</td>
        </tr>
   </tfoot>
</table>

The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.

Tables should not be used for formatting a website's layout. They should only be used for displaying data. The exception to this is email code. Emails are built using table tags.

<thead> - defines a set of rows defining the head of the columns for the table.

<tbody> - encapsulates a set of table rows, <tr> elements, indicating that they comprise the body of the table.

<tfoot> - defines a set of rows summarizing the columns for the table.

<tr> - defines a row of cells in a table. The row's cells can then be established using a mix of <td> (data cell) and <th> (header cell) elements.

<th> - defines an individual cell as header of a group of table cells

<td> - defines an individual cell of a table that contains data

<td colspan="8">Span 8 Columns</td>

While there are some attributes you can use to style tables but they are outdated and deprecated. Tables should be styled with CSS.

The only table specific attribute we will be using is colspan. This attribute is used to make a cell span multiple columns.

tr:first-child{
    color:red;
}
tr:last-child{
    color:blue;
}
tr:nth-child(2){
    color:green;
}
tr:nth-child(even){
    color:yellow;
}
tr:nth-child(odd){
    color:pink;
}

The :nth-child() CSS pseudo-class matches elements based on their position among a group of siblings.

:first-child - This selector will select the first element in a group of siblings

:last-child - This selector will select the last element in a group of siblings

:nth-child(n) - This selector will select the number element specified by the integer used for n in a group of siblings. So for example tr:nth-child(3) would select the third row.

:nth-child(even) - This selector will select the even elements in a group of siblings

:nth-child(odd) - This selector will select the odd elements in a group of siblings.

Practice

Experiment Try changing the first <tr> font to red, the last <tr> font to blue, and the third <tr> font to green.

HTML

<table> <thead> <tr> <th>Header Content 1</th> <th>Header Content 2</th> </tr> </thead> <tbody> <tr> <td>Body Content 1</td> <td>Body Content 2</td> </tr> <tr> <td>Body Content 3</td> <td>Body Content 4</td> </tr> <tr> <td>Body Content 5</td> <td>Body Content 6</td> </tr> <tr> <td>Body Content 7</td> <td>Body Content 8</td> </tr> <tr> <td>Body Content 9</td> <td>Body Content 10</td> </tr> <tr> <td>Body Content 11</td> <td>Body Content 12</td> </tr> <tr> <td>Body Content 13</td> <td>Body Content 14</td> </tr> </tbody> </table>

CSS

table{ border:1px solid black; } th, td{ border:1px solid red; } tr:nth-child(even){ color:black; } tr:nth-child(odd){ color:pink; }

Preview

Open GitHub Desktop (you may need to download the program again if the computers get wiped.)

Couple of things to check in GitHub Desktop.

With your cs-318 repository selected, Click open in Visual Studio code.

Create a new folder called lab12

Create a new file called index.html in the lab12 folder

Setup your HTML files

Create your stylesheet

Link your stylesheet to the HTML

Change Document in the <title> element to "Lord of the Rings Characters"

HTML

Add a <table> element. Every element from here on down will be in the table.

Add a <thead>

In the <thead> add each bullet point as a <th>

Then add a <tr> around the first <th> and a second <tr> around the rest of the <th> in the <thead>

Add a <tbody>

In the <tbody> add the following 13 times:

Content for the 13 <tr> in the <tbody>

Smeagol

Frodo

Samwise

Gandalf

Aragon

Legolas

Gimli

Merry

Peregrin

Boromir

Sauron

Saruman

Bilbo

Lab 12 html setup

CSS

body

padding 5rem

background color darkolivegreen

font family Georgia, 'Times New Roman', Times, serif

Lab 13 body css

th

background color darkgreen

font color white

Lab 12 th styles

tr:nth-child(even)

background color #ffffe2

tr:nth-child(odd)

background color #e0e0cb

Lab 13 nth-child

td, th

padding .5rem

Lab 13 padding on td and th

thead>tr:first-child>th

Hint: This selector will select the th in first tr in the thead.

font size 2rem

font color goldenrod

Lab 13 title css.
Notice the space in between all of the table cells. This is cause by the default setting for the property border-spacing.

table

border-spacing:0;

Lab 13 border-spacing css

But now the character <th> are hard to differentiate from the rest of the ths.

tbody th

background color #023802

tbody th:hover

background color #022502

Lab 13 tbody th css

td, th

vertical-align top

td

border 1px solid #023502

Lab 13 td border styles

tbody tr:hover

background color #D8D8B6

Lab 13 tr hover styles

Final Steps

Validate your HTML.

Lint your CSS at Jigsaw.w3.org

Now look at GitHub Desktop. You should see all of your files listed out in the left column.

GitHub Desktop files listed

Now you are going to commit your changes.

With all of the files checked. Fill out the Summary field in the bottom left and then click Commit to main.
Committing is staging the files, so they can be pushed to the repository hosted at GitHub.

GitHub Desktop Summary field.

Now you want to push your changes to the Repository. Now if you access the repository from another computer Lab12 will be there. After you push in the top right of the nav it should say "Fetch Origin" instead of "Push Origin"

GitHub Push Origin

Your are Done with Lab12