Scribd
Upload
2 views

Lesson 6 Notes

This document provides a comprehensive guide on creating tables in HTML, detailing the necessary tags and attributes such as <table>, <tr>, <td>, and <th>. It covers advanced features like colspan and rowspan, as well as accessibility considerations for tables. Additionally, it includes examples and encourages practice with table coding for a final web project.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Lesson 6 Notes

This document provides a comprehensive guide on creating tables in HTML, detailing the necessary tags and attributes such as <table>, <tr>, <td>, and <th>. It covers advanced features like colspan and rowspan, as well as accessibility considerations for tables. Additionally, it includes examples and encourages practice with table coding for a final web project.

Uploaded by

cameron.king1202
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML Practice Exercise #6

Since Lesson 1 you have been expanding your knowledge of HTML codes through a series of HTML practice exercises.
These exercises, used in conjunction with the assignments, will culminate in a complete web site.

In this exercise, you will learn how to create tables in a web page. You could use the web page that you've been working
on in previous lessons if you wish.

How to Make Tables in HTML

The parts of the table:


The main <table> tag itself.
The cells - what actually shows up in the table. You can make cells of different sizes, and aligning the text in the cell.

A. The <table> tag:

All tables must begin and end with the <table> and </table> tags. The <table> tag can have some extra attributes
added to it, much like the main <body> tag of your document. Some of these attributes should always be used. Here
they are:
border - this attribute is used to specify how wide the border surrounding your table should be. It should look like
this:
<table border="#">
Where the # is the width of the border you want.
If you do not want a visible border, you should set your border to " 0".
cellspacing - This attribute specifies the horizontal and vertical space, in pixels, left between individual cells in a
table (the "thickness" of the dividing lines). The default value is 1.
cellpadding - This attribute sets how much space there is between the edges of the table, and anything in your
table. This attribute is optional - you don't need it! To use it, it would look like this:
<table border="1" cellpadding="size" cellspacing="size">

Where size is any number from 0 to 100 (anything more than that is silly).

Optional attributes:

style = "width:width" - the width of the table on the page, either in exact pixels values or as a percentage of the
page width
style = "height:height" - the height of the table on the page, either in exact pixel values or as a percentage of the
page height
style = "background-color:color" - background color of the table and individual cells that don't already have a
background color

B. The cells themselves:

The main part of a table is the row - all cells must be inside of a row. The row tag is simple - at the beginning of your row,
you place a<tr> tag, and at the end, you place a </tr> tag (TR stands for Table Row). Then, inside of each row, you
place your cells for that row. The tag to begin/end a cell is <td> or <th> - the difference between them is that the text
inside of a <td> cell is normal, and the text inside of a <th> cell is bold. The <th> command should only be used
for a table heading (th). To bold cell contents, simply use the <b></b> commands. A sample table with a <th>
cell, and a <td> in it would look like this:
<table>
<tr>
<th> Heading! </th>
<td> Normal Text! </td>
</tr>
</table>

And a table with more than one "row" might look like this:
<table>
<tr>
<th> Heading One </th><th> Heading Two</th>
</tr><tr>
<td> text one </td><td> text two</td>
</tr>
</table>

C. Advanced features:

colspan: this optional attribute for cells allows you to make one cell which stretches over two or more cells in your
table. It makes your cells stretch across multiple columns, making it wider. It is used like this:
<table>
<tr>
<td colspan="2">two wide!!!</td>
<td>only one</td>
</tr><tr>
<td>Cell one</td>
<td>Cell two</td>
<td>Cell three</td>
</tr>
</table>
rowspan: Much like colspan, this optional attribute for cell allows you to make one cell which stretches over two or
more cells in your table. While colspan makes your cells wider than normal, rowspan makes them taller. It is used
like this:
<table>
<tr>
<td rowspan="2">two high!!!</td>
<td>Cell one</td>
</tr><tr>
<td>Cell two</td>
</tr><tr>
<td>only one</td>
<td>Cell three</td>
</tr>
</table>

Accessibility and Tables


· Use <th> elements to indicate column or row headings.
· Table element summary attribute

o provide an overview of the table contents

· Complex tables:
Associate table cell values with their corresponding headers

o <th> tag id attribute

o <td> tag headers attribute

· Example:

<table border="1" width="75%" summary="This table lists my educational background. Each row describes
educational experience at a specific school.">
<tr>
<th id="school">School Attended</th>
<th id="years">Years</th>
<th id="subject">Subject</th>
<th id="degree" >Degree Awarded</th>
</tr>
<tr>
<td headers="school">Schaumburg High School</td>
<td headers="years">2000 - 2005</td>
<td headers="subject">College Prep</td>
<td headers="degree">H.S. Diploma</td>
</tr>
</table>

Table Row Groups


· <thead> table head rows
· <tbody > table body rows
· <tfoot> table footer rows

<table border="1" width="75%" summary="This table lists my educational background.">


<thead>
<tr>
<th>School Attended</th>
<th>Years</th>
</tr>
</thead>
<tbody>
<tr>
<td>Schaumburg High School</td>
<td>2005 - 2009</td>
</tr>
<tr>
<td>Harper College</td>
<td>2009 - 2010</td>
</tr>
</tbody>
</table>

Using a Table to Format a Web Page (Useful for Navigation)

Example:

<table border="0" width="80%">


<tr>
<td colspan="3">
<h1>This is the banner area</h1>
</td>
</tr>
<tr>
<td width="20%" valign="top">
Place Navigation here</td>
<td width="10">&nbsp;</td>
<td>Page content goes here</td>
</tr>
</table>

Additional Table Layouts

Flexible & Fixed Table Widths


· Fixed Table:

o Table width attribute in pixels

o http://www.redbox.com

o http://www.yankeecandle.com

o http://www.league.org

· Flexible Table:

o Table width attribute in percent


http://www.co.door.wi.gov

Nested Tables
· Outer table configures page layout
· Inner table organizes
some information on the page

Using CSS to Style a Table

XHTML CSS Property


Attribute
align Align a table: table { width: 75%;
margin: auto; }
Align within a table cell: text-align

bgcolor background-color

cellpadding padding

cellspacing To configure a shared common border and eliminate


space between table cells: table, td, th { border-
collapse: collapse; }

height height

valign vertical-align

width width

background-image

To Do

Try the following coding and once you have it working try several of the more advanced features discussed above. When
you are comfortable creating and using tables, place your "best" work in your final web project (Assignment #6).

<table>
<tr>
<th>Column 1 Heading</th> <th>Column 2 Heading</th>
</tr>
<tr>
<td>Column 1, Row 1 Data</td> <td>Column 2, Row 1 Data</td>
</tr>
<tr>
<td>Column 1, Row 2 Data</td> <td>Column 2, Row 2 Data</td>
</tr>
</table>

Next Step

If you can meet the objectives stated at the beginning of Lesson 6, you are ready to proceed to the next lesson. Keep in
mind the weekly schedule recommended in the course syllabus.

Assignment

Continue working on Assignment #5. Details can be found on the course under the Assignments portion.

You might also like