© 2002 d & d enterprises 1 tables html tables. © 2002 d & d enterprises 2 about tables in...
TRANSCRIPT
![Page 1: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/1.jpg)
1 © 2002 D & D Enterprises
HTML TablesTables
Tables are
just
More
Fun
![Page 2: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/2.jpg)
2 © 2002 D & D Enterprises
About Tables
In the simplest sense, HTML tables are comparable to the tables in Microsoft Word
You can designate a portion of the document to be a grid of cells with an arbitrary number of columns and rows
The contents of each cell can be any combination of text and graphic elements
You can format the text within each cell in many different ways, independent of other cells in the same table, almost as if each cell were a little word processing document in its own right
![Page 3: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/3.jpg)
3 © 2002 D & D Enterprises
About Tables
HTML tables have some interesting features not typically found in word processors, such as
machine independencedynamic sizing, and the ability to nest one table inside another
![Page 4: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/4.jpg)
4 © 2002 D & D Enterprises
Tables
For ultimate control over the web page layout you need to learn how to make tables using HTML
Tables allow flexibility to line up graphics and textThis helps organize content on your web pages
Tables operate as spreadsheets or charts similar Microsoft's Excel
Instead of simply putting data in rows and columns you can create complex layout designs by adding images and color to different cells
![Page 5: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/5.jpg)
5 © 2002 D & D Enterprises
Tables
There are three basic units that make up a table the table tag, table row, and a cell tag
Table tag: <table> begins the table and </table> ends it
The table tag tells the browser you're creating a table
Row tag: <tr> indicates the start or a row and </tr> indicates the end of a rowCell tag: <td> designates an individual cell and </td> ends the cell
![Page 6: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/6.jpg)
6 © 2002 D & D Enterprises
Set the Table
<table border="1"> <tr> <td>knife</td> <td>fork</td> </tr> <tr> <td>spoon</td> <td>cup</td> </tr> </table>
![Page 7: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/7.jpg)
7 © 2002 D & D Enterprises
Colspan
A cell can span and stretch across a number of columns
If you want to add a dinner plate to the table arrangement and you want it to span two columns, you'd do that by using the colspan tag
To write this in HTML, simply add another row <tr> to your table and tell the cell to span two columns by adding colspan=2 to your td cell tag
<tr> <td colspan="2"> plate </td></tr>
![Page 8: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/8.jpg)
8 © 2002 D & D Enterprises
Rowspan
Finish setting the table by adding a wine glass on the left and have it span two rows using the rowspan tag
To do this just add another cell first and tell it to span two rows by writing rowspan="2"
<td rowspan="2"> wine<br>glass</td>
![Page 9: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/9.jpg)
9 © 2002 D & D Enterprises
Rowspan vs. Colspan
Just remember if you want a cell to stretch horizontally use colspanTo stretch it vertically, use rowspan
![Page 10: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/10.jpg)
10 © 2002 D & D Enterprises
Cellpadding and Cellspacing
Cellspacing can make the border around your cells thickerIf you'd like to push your text or graphic away from the edge of your cell you can use the cell padding attribute to your table tag
To make your padding or spacing fatter simply specify the number of pixels wide you want it to be
![Page 11: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/11.jpg)
11 © 2002 D & D Enterprises
About Tables
The <TABLE> tag has a huge variety of attributesRemember: The HTML table model is row based
You create a table by defining rows, one at a timeWithin each row you create table cellsEach cell within a table is like a mini HTML document and can have its own text flow, alignment, color, etc.
![Page 12: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/12.jpg)
12 © 2002 D & D Enterprises
Tables!
The core tag associated with any table is the <table> tag
This <table> tag doesn't create a table in and of itself<table> encapsulates all the other tags that specify the layout and content of the tableEvery <table> tag has a required end tag, </table>, which tells the browser that your table is finished.
![Page 13: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/13.jpg)
13 © 2002 D & D Enterprises
About Tables
Tables are composed row by rowIndicate a new row with <tr>
Think of the <tr> tag as a line break signaling that the following data starts a new table row
<td> creates a cell and is shown in the standard body text formatBut each cell within a table is a like a miniature HTML document, with its own text flow, alignment, and other display options.
![Page 14: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/14.jpg)
14 © 2002 D & D Enterprises
Tables
<table> … </table> tag has three basic markup tags
<th> for table heading<tr> for table row <td> for table data the information in a cell
Note: cells do not have to contain data! You can use a space, a <br> or a
![Page 15: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/15.jpg)
Tables -- Type This HTML:<table>
<tr><td>one</td> <td>two</td> <td>three</td>
</tr>
<tr><td>four</td> <td>five</td> <td>six</td>
</tr>
</table>
Save as table.html and load into Netscape
![Page 16: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/16.jpg)
16 © 2002 D & D Enterprises
Tables
The HTML Table model (even the Simple Table Model) is easily the most complex markup structure in HTML
![Page 17: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/17.jpg)
17 © 2002 D & D Enterprises
Table Display
Normally, the browser immediately displays text it receives from the server, modifying the scroll bar to make additional text available as it arrives until the whole document has been transferred
![Page 18: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/18.jpg)
18 © 2002 D & D Enterprises
Table Display
As you have probably noticed, however, in-line graphic images can cause the browser to delay displaying text until a graphic's size is known
Similarly, when the browser encounters a <TABLE> tag, it will not display any part of the table until it receives the entire table from the server and can determine a best-fit layout for column and cell sizes
![Page 19: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/19.jpg)
19 © 2002 D & D Enterprises
About Tables
The browser collects all of the table cells, adjusts their sizes so they fit together and creates a row
After all of the rows are assembled the browser collects all of them together and creates the complete table
![Page 20: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/20.jpg)
20 © 2002 D & D Enterprises
About Tables
Since the size of one cell or row may be affected by other cells or rows in the table, the browser may have to go back and adjust other rows to make the table look right. Because of these dependencies, most HTML tables require two passes by the browser:
One to size the individual cells and rows, and another to display the final table after making any adjustments.
![Page 21: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/21.jpg)
21 © 2002 D & D Enterprises
About Tables
You may have noticed this 2 pass behavior when loading a page with large, complex tables. The page display pauses while the browser reads and processes the table, and then the whole table appears at once
![Page 22: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/22.jpg)
22 © 2002 D & D Enterprises
About Tables
This two-pass behavior is a real pain, making your documents display slowly and erratically.
To mitigate this, HTML 4.0 includes new features that allow one-pass table display, permitting browsers to display tables row by row, as they are received by the browser
![Page 23: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/23.jpg)
23 © 2002 D & D Enterprises
HTML Tables
So a table is contained in the <table> and </table> tagsThese tags should occur only within the <body> section of a documentA document can contain any number of tables, and tables can be embedded (with caution) inside other tablesWithin a <table> tag pair, each row of the table is delimited by paired <tr> and </tr> tags, and each cell within a row is delimited by paired <td> and </td> tags
![Page 24: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/24.jpg)
24 © 2002 D & D Enterprises
Table Headings
A tag pair for table headings, <th> and </th>, is essentially the same as the <td> and </td> tags, except that it formats text with the emphasized and centered attributes
![Page 25: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/25.jpg)
25 © 2002 D & D Enterprises
Simple Table Review
As you have seen, by default tables do not have any borders or gridlines
In the absence of such markings, the user will see an orderly arrangement of text, but may not have a clear idea where the table starts and ends and the text in the body of the document continuesThere are numerous situations where borderless tables are entirely appropriate, such as the presentation of a compact list of hyperlinks or of a traditionally multicolumn document (such as a newsletter or brochure)
![Page 26: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/26.jpg)
26 © 2002 D & D Enterprises
Adding a Table Border
By default, tables do not have any borders or gridlinesHowever, in most cases where you would use a table, it is helpful to mark off the cell divisions with borders and gridlines to help the user understand the data.
To add a default border and gridlines to a table, you include the BORDER attribute in the <TABLE> tag that initiates the table:
<TABLE BORDER>
![Page 27: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/27.jpg)
Add a Table BORDER<table border>
<tr><td>one</td> <td>two</td> <td>three</td>
</tr>
<tr><td>four</td> <td>five</td> <td>six</td>
</tr>
</table>
Save as table.html and load into Netscape
![Page 28: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/28.jpg)
28 © 2002 D & D Enterprises
HTML Tables
You cannot independently control the table's border and gridlines
Their width and appearance can be expected to vary from one browser to another, much as the rendition of the <hr> horizontal rule tag varies among browsers
![Page 29: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/29.jpg)
29 © 2002 D & D Enterprises
Simple Table Review
Create a New File and save it as table1.htmltable1.html
<table border><tr><td>This is cell #1</td><td>This is cell #2</td></tr></table>
![Page 30: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/30.jpg)
30 © 2002 D & D Enterprises
Now modify to table2.html
Download hat.gif to your floppyhttp://www.internetsd.com/courses/html1/hat.gif
Save table1.html as table2.html -- make it look like the following slide:
![Page 31: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/31.jpg)
<table border="0"><tr><td><img src="hat.gif"></td><td>You know, Diane Cunningham is a real technoweenie. She would really
love to put this graphic on her web page. This is a file downloaded from a site called arttoday.com so it is, I believe copyright free! When it was downloaded, it was a .wmf (windows metafile) and was converted from .wmf to a .gif and a .jpg so we can look at image conversions later in this class. I know that this is a lot of text to type in, but hang on, there is a point I wanted to make here...</td>
</tr></table>
table2.html
![Page 32: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/32.jpg)
32 © 2002 D & D Enterprises
<TABLE> Tip
TIP: When you have images in tables, make sure the closing </td> is flushed up against the <img src> tag!!
Having a space or line break can cause some browsers to read the HTML wrong and table cell won’t fit around the graphic
![Page 33: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/33.jpg)
Now save as table3.html
<table width="500" border="0"><tr><td valign="top"><img src="hat.gif"></td><td valign="top">You know, Diane Cunningham is a real technoweenie.
She would really love to put this graphic on her web page. This is a file downloaded from a site called arttoday.com so it is, I believe copyright free! When it was downloaded, it was a .wmf (windows metafile) and was converted from .wmf to a .gif and a .jpg so we can look at image conversions later in this class. I know that this is a lot of text to type in, but hang on, there is a point I wanted to make here...</td>
</tr></table>
![Page 34: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/34.jpg)
34 © 2002 D & D Enterprises
Tables for Layout
Tables don't seem at that exciting, but they are a very important tool for page layout.
The key to using a table for layout is to use the table with the width attribute
The width attribute can be specified in pixels or as a percentageIf your layout goal was to create a 400 pixel column of text with a buffer of 50 pixels on the left and 100 pixels on the right, you couldn't do it without tables!
See http://www.internetsd.com/courses/html1/tlayout.html
![Page 35: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/35.jpg)
© 2002 D & D Enterprises35
Table Headers, Borders Headers, Borders and Rules Rules
<th><table border>
<table rules="rows"> Rules are HTML 4.0
![Page 36: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/36.jpg)
Table Headers th.html
<table border="1"> <tr> <th></th> <th>Oranges</th> <th>Grapefruit</th> </tr> <tr> <th>Flavor</th> <td>Sweet</td> <td>Tart</td> </tr> <tr> <th>Size</th> <td>Small</td> <td>Large</td> </tr> </table>
![Page 37: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/37.jpg)
37 © 2002 D & D Enterprises
More About Tables --Borders
Copy the table code on the previous slide and change border width four times<table border="2"> then try<table border="5"> then try<table border="10"> then try<table border="20"> finally try
See: tborders.html
![Page 38: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/38.jpg)
38 © 2002 D & D Enterprises
Tables -- Rule Attributes IE 4.x only:IE 4.x only: HTML 4.0
Now try these modifications:
<table width="170" border="1" rules="rows"><table width="170" border="1" rules="cols"><table width="170" border="1" rules="none"><table width="170" border="1" rules="all">
rules.html
![Page 39: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/39.jpg)
39 © 2002 D & D Enterprises
Tables -- Frame Attributes IE 4.x only:IE 4.x only: HTML 4.0
You can set frame attributes by cell:“box” draws a box (default behavior)“void” removed table border entirely“above”, “below” “lhs” and “rhs” draw a border on top, bottom, left or right respectively “hsides” and “vsides” draws top and bottom (horizontal) or left and right (vertical) borders
frames.html
![Page 40: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/40.jpg)
© 2002 D & D Enterprises40
Table SpacingSpacing
CELLPADDINGCELLSPACING
![Page 41: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/41.jpg)
41 © 2002 D & D Enterprises
Cell Padding and Spacing
By default, browsers pack things into tables as closely as possible
For greater control over table borders and gridlines, the HTML 3.0 specification of the <table> tag adds the cellspacing and cellpadding attributes
These table attributes control spacingcellpadding (space between a cell and its contents)
cellspacingcellspacing (space between cells)padspace.html
![Page 42: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/42.jpg)
Cell Padding -- try this
<table border="1" cellpadding="10“><tr> <th> </th><th>oranges</th><th>grapefruit</th></tr><tr><th>flavor</th><td>sweet</td><td>tart</td></tr><tr><th>size</th><td>small</td><td>large</td></tr></table>
![Page 43: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/43.jpg)
Cell Spacing -- try this
<table border="1" cellspacing="10“> <tr><th> </th><th>oranges</th><th>grapefruit</th></tr><tr><th>flavor</th><td>sweet</td><td>tart</td></tr><tr><th>size</th><td>small</td><td>large</td></tr></table>
![Page 44: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/44.jpg)
44 © 2002 D & D Enterprises
More Table Fun
Go check out the source codes from:
http://www.internetsd.com/courses/html1/tables.html
alignmentheadersspacescaptions
![Page 45: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/45.jpg)
45 © 2002 D & D Enterprises
Table Row and Column Span
Go check out the source codes from:http://www.internetsd.com/courses/html1/table2.html
and from http://www.internetsd.com/courses/html1/table3.html ROWSPANCOLSPAN
![Page 46: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/46.jpg)
46 © 2002 D & D Enterprises
More on Tables
Make SURE to read Chapter 10 in your textbook and run all of the sample exercises!Advanced table layout is covered in Web Pub II!If you want a preview, check out:
http://beta.peachpit.com/vqs/K5950/ excerpt.html
![Page 47: © 2002 D & D Enterprises 1 Tables HTML Tables. © 2002 D & D Enterprises 2 About Tables In the simplest sense, HTML tables are comparable to the tables](https://reader035.vdocument.in/reader035/viewer/2022081504/56649ee55503460f94bf3ca1/html5/thumbnails/47.jpg)
47 © 2002 D & D Enterprises
Next...
Navigation II and Clickable Image Maps