Introducing Web Page Tables

1

Introducing

Web Page Tables

Updated on: September 4, 2010

C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e s

Professor Al Fichera

Intro. to Web Page Tables by Professor Al Fichera http://profal2.com

1What This Lecture CoversIn the first lecture on HTML Tables I will introduce the

basic tags that will be used.Learn how to control Web page layout and alignment with

Tables.Use Background Colors and Images.Use Cellpadding and Cellspacing

2


1Creating a Simple TableThe key thing to remember about tables in HTML is that

they are first organized in rows, which go horizontally from left to right.Note: There are many HTML editors such as Dreamweaver that will

create tables for you, but it pays to know some of the codes and how they are used.

3


1Creating Basic Table CodeThere are very few tags needed to create a basic Web

Table, and that's a good thing!Basic Table Tags include:

<table> Tag closes with </table><tr> Table Row closes with </tr><td> Table Data closes with </td>border="" Closing not neededcellspacing="" Closing not neededcellpadding="" Closing not needed

4


1Working with Rows & ColumnsAfter your starting <table> tag you can begin your first

ROW. <tr>Each COLUMN in the ROW begins and ends with these

tags: <td> </td>If there were to be four columns in your table, you'd have

four sets of <td> </td> before you'd close the ROW </tr>

5


1Headings for your TablesTable headings are created using the double-sided <th> </th> tag pair.

Expect the data between these tags to be in a Bold Face and Centered as well.You may use the Table Heading tag in any Row or Cell in

the Table as you wish.

6


1Preferred Table Syntax HTMLers generally have a certain style in which they write

the Table code.Indentation helps organize your table data and makes

debugging a snap!Use the next slide for a guide.

7


1Table Syntax<table>

<tr> <td> Place your data or image here. </td>

</tr></table>

By placing all like-type codes in a column-wise fashion helps you find missing or incorrect code quickly.

8


1Helpful Tips Building TablesHere is something we've all used for years when building a

table from scratch, even if we use Dreamweaver or FrontPage to keep it straight.Use the first letter 'R' to stand for Row.Use the first letter 'C' to stand for Column.

the following, each in it's own cell.If you have four columns in the 1st and 2nd row, you

would use R1C1 R1C2 R1C3 R1C4R2C1 R2C2 R2C3 R2C4

9


1Interesting Note on TablesTables are like rubber bands, they can stretch in any

direction to fit the contents of your table.A table cell will stretch horizontally and rescale all the cells

in the ROW before it decides to use the WRAP attribute for the cell with the most content.

10


1Tables Auto-Resize ContentIf you do not advise the table about the width of the cells,

it will Auto-Resize.

11


1Gaining Control Over WidthYou can control the overall size and appearance of your

table using the absolute width attribute.Be aware: What will a 400 pixel wide table look like in a

640x480, 800x600, or 1024x768 Browser Window?To force a table to be exactly 400 pixels wide, type <table width="400">

12


1Table Width by PercentWhy not make your table width to be relative to the space

between the left and right margins of the users browser window?This means that the table will resize along with the Web

browser.A "Stretchy Table" example is shown next.

13


1Stretchy Tables

14


1Table Column WidthsYou can apply Width settings to Columns by placing the width attribute inside the <td> or <th> tags.You can use absolute (pixels) or relative (%) numbers if

you wish.To set a column width to one-half the total width of the

table, type

<td width="50%">

15


1Column Width TipCreate a single row that contains no other content except

for Column Width information.Can be placed at the end of the table and will look like a

blank row.You could add a comment such as the following to

identify this row:

16


1Column Width Rules

<table> <tr>

<td width="n"> </td> <td width="n"> </td> <td width="n"> </td>

</tr>

Column widths must be set in only one cell per column. Note: You can choose to repeat for each row or not to repeat the width.

Note: "n" stands for the number to be used for the width, whether relative or absolute.

17


1Taking Width ControlThis table example is controlled by a single row of column width as the first row, if you look closely, you can spot a bit more room at the top. A better place to put this code would have been as the last

row, it would be less evident since it's nature for the eye to like to see more space at the bottom of a picture than the top.

18


1Column Width IdeaUse an invisible graphic as a control for the column width.

An invisible GIF is a 1 pixel square without any color, and can be made in any graphics program.

Browsers treat tables quite differently and this might even the score a bit for you.

Your code might look like this:<td><img src="invisible.gif" width="n" height="n" /> </td>

The Height attribute tag can be omitted to allow for the natural expansion of the cell.

19


13 Invisible Gif Screen Shots <td><img src="invisible.gif" width="120" height="100"></td>(Table Width set at 600 pixels.)

20


1Formatting Text in TablesEach cell of a table can be formatted independently of the

others.You can use the standard markup tags for text such as

<b>, <i> and <strong>.You can also include line breaks within each table cell by

using the <br /> tag or a paragraph tag <p>.However, you should use CSS to Style your Table, it will

save a lot of extra work for you.

21


1Aligning Text Within TablesBecause we are using the English language for our

Browsers, text is aligned on the left side of the Table, however, placed in the Middle of the cell.

You must tell the individual cell to align the text to the top, unless you are happy with the middle placement.CSS applied for the table can override this if needed.

22


1Alignment in HTML TablesThere are nine (9) divisions that can be addressed for

every table and in every table cell.Imagine a individual table cell looking somewhat like a

tic-tac-toe board.We can name each

of these divisions.

23


1Alignment in HTML TablesThe three (3) HTML Horizontal alignments are addressed

as align="left | center | right

The three (3) HTML Vertical alignments are address as valign="

top | middle | bottomHTML allows us to name each of the nine (9) different

locations in the grid, however, XHTML wants you to use CSS for this action.

24


1Alignment of Individual CellsIndividual cell alignments will override any settings for the

row you created.To Center text within an individual cell both VERTICALLY

and HORIZONTALLY, type

<td align="center" valign="middle">

25


1Creating a Table BorderType <table border="1"> to create a table with a

thin border around all of the table cells.Note: To create a table with no border at all, simply type

<table>

26


1Adding a Background ColorThere will be times when you will wish to add a

background color to a whole table or just a particular cell or row.Use the HTML bgcolor command with a color name

or HEX color inside the <table> or <tr> and <td> tags. For a 'Steel blue' color:

<table bgcolor="#236b8e"> <tr bgcolor ="#236b8e"> <td bgcolor ="#236b8e">

27


1BGCOLOR ExamplesExamples using the bgcolor command inside the 3

Table tags.

<table>

<tr>

<td>

28


1Adding a Background ImageThere will be other times when you will wish to add a

background image to a whole table or just a particular cell or row.Use the HTML background command with a GIF or

JPG image inside the table or tr and td tags. For Example:

<table background="image.jpg"> <tr background="image.jpg"> <td background="image.jpg">

29


1Background Image ExamplesExamples using the BACKGROUND command inside the 3

Table tags.

<table>

<tr>

<td>

30


1Using Table Cell SpacingYou have control over the borders and spacing of the cells

inside your table.To change the internal margins of your new table, add the cellspacing attribute to the table tag.Type: <table cellspacing="5">Since we are using HTML, we do not have to use

anything but a number for the size. In CSS you would have to use pixels, points, ems, etc.

31


1Understanding CellspacingThink of Cellspacing as the distance between

houses, (that is, if each house represents an individual cell.) In this photo there is very little Cellspacing!

32


1More on CellspacingThese homes represent more Cellspacing in a

table. Spacing between cells makes the data easier to see or read.

33


1Using Table Cell PaddingYou can also “pad” the individual cells of your table to add

space on all sides. This keeps the text from touching the lines that make up the cell borders.

To add this space use the cellpadding tag inside your <table> tag.To add 5 pixels of space on each side of every cell type <table cellpadding="5">

34


1Cellpadding & Cellspacing

35


1Flush Aligned TableThis one cell table was made to be flush against the

pictures edge. (The screen resolution used here is 800 x 600.)

<tr align="center" valign="middle"> <td><img src=“image.jpg"

border="2"> </td></tr>

36


1Making a DrawingSo the best thing to do when planning a sophisticated

table for your viewers is make a small drawing on paper first.

After sketching, decide which tags are needed on paper first, and then type the code.See now your headaches are gone…

or take some more Excedrin!

37


1What This Lecture CoveredIn this lecture you learned about basic HTML Table Tags.You learned how to control Web page layout and

alignment with Tables.You learned how to incorporate Background Colors and

Images into your Tables.You learned what Cellpadding and Cellspacing are and

how to use them in your Tables.

38


1What The Next Lectures CoverIn part 2, you'll learn some Table Concepts to use.In part 3, you'll learn some of the Table Rules that will help

you make your Tables more accessible.In part 4, you'll learn how to incorporate CSS Styles into

the Head of your Web page document.In part 5, you'll see how to use Dreamweaver to create the

tables and satisfy accessibility needs.

39

Documents

Introducing Web Page Tables