Upload
neal
View
35
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Introducing Web Page Tables. CIS67 Foundations for Creating Web Pages Professor Al Fichera. Updated on: September 4, 2010. What This Lecture Covers. In the first lecture on HTML Tables I will introduce the basic tags that will be used. - PowerPoint PPT Presentation
Citation preview
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1Tables Auto-Resize ContentIf you do not advise the table about the width of the cells,
it will Auto-Resize.
11
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1Stretchy Tables
14
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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:<!-- This row contains Width controls -->
16
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
13 Invisible Gif Screen Shots <td><img src="invisible.gif" width="120" height="100"></td>(Table Width set at 600 pixels.)
20
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1BGCOLOR ExamplesExamples using the bgcolor command inside the 3
Table tags.
<table>
<tr>
<td>
28
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1Background Image ExamplesExamples using the BACKGROUND command inside the 3
Table tags.
<table>
<tr>
<td>
30
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1More on CellspacingThese homes represent more Cellspacing in a
table. Spacing between cells makes the data easier to see or read.
33
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
1Cellpadding & Cellspacing
35
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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
Intro. to Web Page Tables by Professor Al Fichera http://profal2.com
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