HTML For the World Wide Web Working with

HTML For the World Wide Web Working with Tables in HTML

KPAF Radio Kyle Mitchell is the program director at KPAF, a public radio station broadcasting out of Bismarck, North Dakota. To remain viable, it is important for the station to have a presence on the internet. With this in mind Kyle has been upgrading the KPAF website. He envisions a site in which listeners have quick and easy access to information about the station and its programs. The site needs to include pages listing the KPAF morning, afternoon and evening schedules. Kyle decides that this information is best communicated to listeners in a table. He need your help because he has never created a table on a web page before.

Introducing Web Tables You meet with Kyle in his office to discuss the design of the new website. He has already created a basic web page design displaying the KPAF logo and a list of links to other pages. Download the KPAF files from the class web page into a new folder called KPAF. Review the schedule. htm file and kpaf. css files to become familiar with their structures.

Link the HTM and CSS Files Link the schedule. htm file to the kpaf. css file by inserting the link tag in the head section of the schelule. htm file. <link href="kpaf. css" rel="stylesheet" type="text/css" /> Save your changes and open the schelule. htm file in your browser. Open the kpaf. css file in notepad and compare the styles to the elements on the browser page.

Understanding HTML Tables Each table in a web page follows a basic structure consisting of ◦ Table Elements <table> ◦ Table Rows <tr> The general HTML code for a table is: <table> <tr> table cells </tr> </table>

KPAF Evening Schedule Kyle proposed a web table with 10 rows, the first row containing the days of the week, followed by nine rows listing the radio shows from 6: 00 pm to 10: 30 pm. Time Monday Tuesday Wednesday Thursday Friday Saturday Sunday 6: 00 pm National News National News 6: 30 pm Local News Local News 7: 00 pm Opera Fest Radio U Science Week The Living World Word Play Agri-Week Folk Fest Brain Stew Bismarck Forum Old Time Radio Saturday Nite Jazz The Indie Connection World News Feed 7: 30 pm 8: 00 pm The Classical Music Connection 8: 30 pm The Inner Mind 9: 00 pm Open Mike Nite 9: 30 pm 10: 00 pm World News Feed World News Feed

Insert the Table Return to the schedule. htm file in notepad. Directly above the address element, insert the following: <table> <tr> </tr> <tr> </table> This creates a table of three rows but they are empty because you have not yet added any table cells.

Insert Table Headings The <th> tag identifies table headings In the first table row insert the following between the first <tr> and </tr> tags: <table> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr>

Insert the Row Headings In the second row tag insert <th>6: 00 pm</th> In the third row tag insert <th>6: 30 pm</th> Create the row headings for the rest of the table. You will need to additional table row <tr> tags to complete the table’s 10 rows

Insert Data in the Second Row To add data to a row use the table data tag <td> In the second row insert the following table data elements: <td>National News</td> Because the National News is on every day at 6: 00 you will need to add 6 more <td> tags just like the first one in the second row of the table.

Insert Data in the Third Row In the 6: 30 pm row three insert the table data: <td>Local News</td> Because the Local News is on every day at 6: 30 you will need to add 6 more <td> tags just like the first one in the third row of the table. Save your changes and refresh your browser. Verify that the row and column headings are in bold font and that the first three rows of the table look correct.

Add a Table Border By default there are no gridlines or borders displayed in a web table. Kyle would like to add them to make the table easier to read. To add gridlines and borders insert the border attribute to the <table> tag: <table border="value"> Where value is the width of the border. This value will not change the internal gridlines.

Add a Border to the Schedule Return to the schedule. htm file in notepad. Add the boarder attribute to the <table> tag. <table border="1"> Save your changes and refresh the browser. Verify that the border and gridlines are displayed as expected.

Spanning Rows and Columns Reviewing the schedule you notice that there are several programs that are longer than a half hour and some are repeated across several days. To accomplish this in the table without having to repeat the programs we can span a cell. To span more than one row use the rowspan attribute To span more than one column use the colspan attribute <td rowspan="value" colspan="value"> Where value is the number of rows or columns to be spanned

Create Cells that Span Columns Return to the schedule. htm file in notepad. Add the colspan attribute to the second and third rows in the table. <tr> </tr> <th>6: 00 pm</th> <td colspan="7">National News</td> <th>6: 30 pm</th> <td colspan="7">Local News</td> Delete the other six cells in these table rows. Save your changes and refresh the browser.

Table with Spanned Comumns Time Monday 6: 00 pm National News 6: 30 pm Local News Tuesday Wednesday Thursday Friday Saturday The cells span all seven columns Sunday

Span Rows Return to the schedule. htm file in notepad. Add the following to the 7: 00 pm fourth row. <tr> <th>7: 00 pm</th> <td rowspan="2">Opera Fest</td> <td rowspan="2">Radio U</td> <td rowspan="2">Science Week</td> <td rowspan="2">The Living World</td> <td>Word Play</td> <td>Agri-Week</td> <td rowspan="2">Folk Fest</td> </tr>

Fill in the 7: 30 Programs The 7: 30 pm row should display two programs that start at 7: 30 pm. The HTML code for this row is: <tr> <th>7: 30 pm</th> <td>Brain Stew</td> <td>Bismarck Forum</td> </tr> Save you file and refresh your browser. Verify that the table matches the next slide.

Verify the five rows. Time Monday 6: 00 pm National News 6: 30 pm Local News 7: 00 pm Opera Fest 7: 30 pm 8: 00 pm 8: 30 pm 9: 00 pm 9: 30 pm 10: 00 pm Tuesday Wednesday Thursday Friday Saturday Sunday Radio U Science Week The Living World Word Play Agri-Week Folk Fest Brain Stew Bismarck Forum

Add the 8: 00 pm Programs Return to schedule. htm file in notepad. Enter the following for the 8: 00 pm programs. <tr> <th>8: 00 pm</th> <td rowspan="4" colspan="4">The Classical Music Connection</td> <td>Old Time Radio</td> <td rowspan="4">Saturday Nite Jazz</td> <td rowspan="4">The Indie Connection</td> </tr>

Add the 8: 30 -10: 00 pm Programs <tr> </tr> <th>8: 30 pm</th> <td>The Inner Mind</td> <th>9: 00 pm</th> <td rowspan="2">Open Mike Nite</td> <th>9: 30 pm</th> <th>10: 00 pm</th> <td colspan="7">World News Feed</td> Save your changes and refresh.

Verify the Table Changes Time Monday 6: 00 pm National News 6: 30 pm Local News 7: 00 pm Opera Fest Tuesday Wednesday Thursday Friday Saturday Sunday Radio U Science Week The Living World Word Play Agri-Week Folk Fest Brain Stew Bismarck Forum Old Time Radio Saturday Nite Jazz 7: 30 pm 8: 00 pm The Classical Music Connection 8: 30 pm The Inner Mind 9: 00 pm Open Mike Nite 9: 30 pm 10: 00 pm World News Feed The Indie Connection

Create a Caption for the Table Return to the schedule. htm file in notepad. Add the following caption directly below the opening <table> tag: <table border="1"> <caption>All times listed in central time</caption> Save your changes and refresh in the browser.

Marking Row Groups You can divide a table’s row into row groups to enable different styles in each group. HTML supports three kinds of table groups ◦ Table Header <thead> ◦ Table Footer <tfoot> ◦ Table Body <tbody> The order is important the 1. header must be first 2. footer second 3. body third

Add the Row Groups <thead> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr> </thead> <tbody> <tr> <th>6: 00 pm</th> <tr> <th>10: 00 pm</th> <td colspan="7">World News Feed</td> </tr> </tbody>

Mark the Column Groups Like Row Groups, columns can be marked so that they can be styled. Directly below the table <caption> tag, insert the following: <table border="1"> <caption>All times listed in central time</caption> <colgroup> <col class="firstcol"/> <col class="daycols" span="7" /> </colgroup> Save your changes and refresh your browser. there should be no changes.

Add a Table Summary Return to the schedule. htm file in notepad. The summary provides a way for visually impaired users to use an aural browser to read the information about the table. The summary will not appear on the screen. Add the summary attribute to the opening <table >tag: <table border="1" summary="This table contains the nightly KPAF program schedule aired form Bismarck, North Dakota. Program times are laid out in thirty-minute increments from 6: 00 p. m. to 10: 00 p. m. , Monday through Sunday night. "> Save your changes and refresh your browser.

Add Styles to Your Table To style your table and make it shine, return to the class website and follow the directions in Part 2.