tables learn to create and enhance tables using a variety of attributes and formats
TRANSCRIPT
![Page 1: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/1.jpg)
Tables
Learn to create and enhance TABLES using a variety of attributes and
formats.
![Page 2: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/2.jpg)
TABLES
• Tables allow you to POSITION elements on a web page.
![Page 3: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/3.jpg)
Tables
• Tables make web pages look more organized and professional.
![Page 4: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/4.jpg)
The borderless TABLE
•Creates a BANNER into which you can insert TEXT.
![Page 5: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/5.jpg)
TABLE ELEMENTS
• Tables consist of ROWS and COLUMNS and CELLS.
![Page 6: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/6.jpg)
Rows
• A Row is a horizontal line of information.
First
Name
Last
Name
Address City State
![Page 7: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/7.jpg)
A Column
• A Column is a vertical line of information
![Page 8: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/8.jpg)
Cell
• A CELL is the inter section of a row and column.
![Page 9: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/9.jpg)
Building Tables
• Cells have TWO VARIATIONS: – Headings and DATA
![Page 10: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/10.jpg)
Heading Cells
• Heading Cells display BIG and Black and BOLD
First
Name
Last
Name
Address City State
![Page 11: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/11.jpg)
Data Cells
• Data Cells display little and plain and normal.
Bonnie Mills 300 Bell St.
LA CA
![Page 12: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/12.jpg)
OTHER Parts of a TABLE
• Table Border
• Table Header
• Table Captions
![Page 13: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/13.jpg)
Table Borders
• Table Borders are lines that go around the perimeter of a table.
![Page 14: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/14.jpg)
Table Headers
• Table Headers are BOLD TEXT that indicate the purpose of the ROWS and Columns.
City State
![Page 15: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/15.jpg)
A Table Caption
• A Table Caption is text that describes the purpose of a table.
City STATE
Harbor City CA
This table needs something else . . . Color !
![Page 16: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/16.jpg)
Planning, designing and coding
• Creating Tables is a THREE step process1. Planning
2. Designing
3. Coding
![Page 17: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/17.jpg)
Planning
Do you REALLY need a table?
• If you can explain the Web Page using ONLY paragraphs and Bulleted lists. You don’t need a table.
![Page 18: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/18.jpg)
A Table is appropriate when
• You need to organize data so that it is easier for the reader to understand.
• The TABLE gives the web page a more professional look and
• More clearly explains the topic.
![Page 19: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/19.jpg)
PLANNING the table
• Begin with a good design
• Sketch out on paper before writing the HTML code.
5k race 10K race
Time Time
![Page 20: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/20.jpg)
The Big Race
• How many rows?
• How many columns?
Name1 Name2 Name3 Name4
Time Time Time Time
![Page 21: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/21.jpg)
http://www.davesite.com/webstation/html/chap12.shtml
• http://www.davesite.com/webstation/html/chap12.shtml
5K 10K
Name1 Name1 Name1 Name1
Time Time Time Time
![Page 22: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/22.jpg)
Coding the Table
• <table border=4> • <tr> • <th>What are tables used for?</th> </tr>• <tr> • <td>Tables are used to make data easier
to interpret or to just give your document more impact.</td>
• </tr> • </table>
![Page 23: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/23.jpg)
Start the TABLE
• Tables are one of the most challenging things to code with HTML.
• Tables start with the <table> tag, and
• usually contain the border=n attribute within the opening tag.
<table border=4>
![Page 24: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/24.jpg)
Invisible borders
• If the border=0, than the table's border is invisible.
• Usually when you do not use the border attribute the table border will become invisible.
![Page 25: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/25.jpg)
Invisible borders
This is useful when you want to align text in rows and columns, but don't want a table border around it.
• border=1 is a thin border.• border=2 is a little thicker,
• border=3 a little more thick.. and so on.
![Page 26: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/26.jpg)
Example of tables with borders...
This table has a border of 0.
<table border=0> <tr> <td>This table has a border
of 0.</td> </tr> </table>
This table has a border of 3.
<table border=3> <tr> <td>This table has a
border of 3.</td> </tr> </table>
![Page 27: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/27.jpg)
Each Row is defined
• Each row within the table is defined by the opening <tr> tag and the optional </tr> closing tag.
<tr>
</tr>
![Page 28: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/28.jpg)
Within each row…table cells
• Within each table row are table cells, which are defined by the <td> opening and </td> closing tags.
<td>
</td>Most table rows contain more than one cell.
![Page 29: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/29.jpg)
Heading Tags
• Many times, you will need a heading for a column of cells of the first row.
• To do this, you will use the <th> opening and </th> closing tag.
<th>
</th>
![Page 30: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/30.jpg)
Heading Tags
• The table heading tag makes the text in that cell BOLD and CENTERED.
• You only need use the heading cells when necessary.
![Page 31: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/31.jpg)
<table border=2>
<tr> <th>Heading A</th><th>Heading B</th><th>Heading C</th>
</tr>
<tr> <td>Cell A</td><td>Cell B</td><td>Cell C</td> </tr>
<tr> <td>Cell D</td><td>Cell E</td><td>Cell F</td> </tr>
</table>
![Page 32: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/32.jpg)
Example of Multiple Rows and Columns
Heading A Heading B Heading C
Cell A Cell B Cell C
Cell D Cell E Cell F
![Page 33: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/33.jpg)
ROWSPAN=2
<table border=2>
<tr>
<th>Heading A</th><th>Heading B</th> <th>Heading C</th> </tr>
<tr>
<td rowspan=2>Cell A & D</td><td>Cell B</td><td>Cell C</td>
</tr>
<tr>
<td>Cell E</td><td>Cell F</td> </tr> </tr>
</table>
![Page 34: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/34.jpg)
ROWSPAN
• Notice how the rowspan=2 attribute was added.
• This allows that cell to span two rows.
![Page 35: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/35.jpg)
colspan=n
• If you want a cell to span more than 1 column, use the colspan=n attribute.
![Page 36: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/36.jpg)
The ALIGN attribute
• you may wish to use the ALIGN and VALIGN attributes to align the contents of cells.
<TD>ALIGN=LEFT, ALIGN=CENTER or ALIGN=RIGHT
</TD>
![Page 37: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/37.jpg)
Vertical Allignment
• If you wish to change the vertical alignment of the contents of a cell,
<TD>
VALIGN=TOP,
VALIGN=MIDDLE, or
VALIGN=BOTTOM attributes.
</TD>
![Page 38: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/38.jpg)
Width Attribute• You may also want to try out the
WIDTH=n% attribute, to change the width of a table or a cell.
<table border=1 width=100%>
![Page 39: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/39.jpg)
<table border=1 width=100%> <tr> <td align=left>Left Alignment</td> <td align=center>Center
Alignment</td> <td align=right>Right Alignment</td> </tr>
</table>
![Page 40: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/40.jpg)
• <html><head><title>Title goes here</title></head><body bgcolor="#AABBCC"><h1 align=right>Body goes here</h1><hr><center><h3>Headings are kewl!</h3></center><hr size=10><table border=2 width=75%><tr><td>Tables</td><td>give</td><td>impact!</td></tr></table></body></html>
![Page 41: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/41.jpg)
Coding the Table
<TABLE>
</TABLE>• Indicates the beginning and end of the table.
• All other tags go within these tags.
![Page 42: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/42.jpg)
Here comes a ROW !!
<TR>
</TR>• Indicates the beginning and end of a table
ROW
• Rows consist of headings or data cells
![Page 43: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/43.jpg)
Table Heading Cell
<TH></TH>
• Indicates the beginning and end of a table
heading cell.• Heading cells default to Bold and center
alignment.• Heading Cells have macho ATTITUDE !!
![Page 44: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/44.jpg)
Table Data
<TD></TD>
• Indicates the beginning and end of a table data cell.
• Data cells default to normal text with left alignment.
• Data cells are normal and ordinary.
![Page 45: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/45.jpg)
Table ATTRIBUTES
<TABLE></TABLE>• ALIGN (LEFT, RIGHT, CENTER)
• BGCOLOR
• BORDER
• CELLSPACING (between cells)
• CELLPADDING (within cells)
• COLS
• WIDTH (relative to window width)
![Page 46: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/46.jpg)
Table Row Attributes
<TR> </TR>• ALIGN (LEFT, CENTER, RIGHT)
• BGCOLOR
• VALIGN (TOP, MIDDLE, BOTTOM)
![Page 47: Tables Learn to create and enhance TABLES using a variety of attributes and formats](https://reader036.vdocument.in/reader036/viewer/2022062619/5519b27b55034660578b4659/html5/thumbnails/47.jpg)
Table Header Attributes
<TH> and </TH>• ALIGN (LEFT, CENTER, RIGHT, JUSTIFY)
• BGCOLOR• COLSPAN (sets number of columns spanned by cell)
• ROWSPAN(sets number of columns spanned by cell)
• VALIGN (vertically aligns cell)– (TOP, MIDDLE, BOTTOM)