Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Changing Table Background on MouseOver
by Ades Tynyshov
Expanding Table
by Andy
Table Properties
by Michael Aldworth
Website Design
by Ades Tynyshov
Free Web Designs
A collection of free web templates. Premium quality web designs, easy to browse.
HTML and CSS tutorials
A collection of free web templates. Premium quality web designs, easy to browse.
Html lessons and tutorials in web page design.
You, too, can design your own website with over 45 interactive HTML tutorials. Also try your hand at JavaScript or check out a search engine submission service.
2 Create a Website
Offers free tutorials on website creation, generating traffic and making money online.
HTML and CSS  Home HTML and CSS Tutorials Table Examples
rss

Table Examples

Author: netscape More by this author
Browse Pages:  1  2 > >>

Added: Oct 17, 2005 Rating:  Average Rating: 3.6 Votes: 20 Position: 2825 of 12424Average Rating: 3.6 Votes: 20 Position: 2825 of 12424Average Rating: 3.6 Votes: 20 Position: 2825 of 12424Average Rating: 3.6 Votes: 20 Position: 2825 of 12424Average Rating: 3.6 Votes: 20 Position: 2825 of 12424 Level: Beginner Software:  DreamweaverGoLiveFrontPage

This is intended to be a tutorial by example of Tables. This covers most of the new tags in tables, though it doesn't necessarily show some of the really creative capabilities available in tables.

A Basic 3x2 Table

A B C
D E F

<TABLE BORDER>
  <TR>
   <TD>A</TD>
   <TD>B</TD>
   <TD>C</TD>
  </TR>
  <TR>
   <TD>D</TD>
   <TD>E</TD>
   <TD>F</TD>
</TR>
</TABLE>

Two Demonstrations of Rowspan

Item 1 Item 2 Item 3
Item 4 Item 5

<TABLE BORDER>
 <TR>
  <TD>Item 1</TD>
  <TD ROWSPAN=2>Item 2</TD>
  <TD>Item 3</TD>
 </TR>
 <TR>
  <TD>Item 4</TD>
  <TD>Item 5</TD>
  </TR>
</TABLE>

Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7

<TABLE BORDER>
 <TR>
  <TD ROWSPAN=2>Item 1</TD>
  <TD>Item 2</TD>
  <TD>Item 3</TD>
  <TD>Item 4</TD>
 </TR>
 <TR>
  <TD>Item 5</TD>
  <TD>Item 6</TD>
  <TD>Item 7</TD>
 </TR>
</TABLE>

Demonstration of Colspan

Item 1 Item 2
Item 3 Item 4 Item 5

<TABLE BORDER>
 <TR>
  <TD>Item 1</TD>
  <TD COLSPAN=2>Item 2</TD>
 </TR>
 <TR>
  <TD>Item 3</TD>
  <TD>Item 4</TD>
  <TD>Item 5</TD>
 </TR>
</TABLE>

Demonstration of Headers, <TH>

Head1 Head2 Head3
A B C
D E F

<TABLE BORDER>
 <TR>
  <TH>Head1</TH>
  <TH>Head2</TH>
  <TH>Head3</TH>
 </TR>
 <TR>
  <TD>A</TD>
  <TD>B</TD>
  <TD>C</TD>
 </TR>
 <TR>
  <TD>D</TD>
  <TD>E</TD>
  <TD>F</TD>
 </TR>
</TABLE>

Demonstration of Colspan and Headers

Head1 Head2
A B C D
E F G H

<TABLE BORDER>
 <TR>
  <TH COLSPAN=2>Head1</TH>
  <TH COLSPAN=2>Head2</TH>
 </TR>
 <TR>
  <TD>A</TD>
  <TD>B</TD>
  <TD>C</TD>
  <TD>D</TD>
 </TR>
 <TR>
  <TD>E</TD>
  <TD>F</TD>
  <TD>G</TD>
  <TD>H</TD>
 </TR>
</TABLE>

Demonstration of Multiple Headers, Colspan

Head1 Head2
Head 3 Head 4 Head 5 Head 6
A B C D
E F G H

<TABLE BORDER>
 <TR>
  <TH COLSPAN=2>Head1</TH>
  <TH COLSPAN=2>Head2</TH>
 </TR>
 <TR>
  <TH>Head 3</TH>
  <TH>Head 4</TH>
  <TH>Head 5</TH>
  <TH>Head 6</TH>
 </TR>
 <TR>
  <TD>A</TD>
  <TD>B</TD>
  <TD>C</TD>
  <TD>D</TD>
 </TR>
 <TR>
  <TD>E</TD>
  <TD>F</TD>
  <TD>G</TD>
  <TD>H</TD>
 </TR>
</TABLE>

Demonstration of Side Headers

Head1 Item 1 Item 2 Item 3
Head2 Item 4 Item 5 Item 6
Head3 Item 7 Item 8 Item 9

<TABLE BORDER>
 <TR>
  <TH>Head1</TH>
  <TD>Item 1</TD>
  <TD>Item 2</TD>
  <TD>Item 3</TD>
 </TR>
 <TR>
  <TH>Head2</TH>
  <TD>Item 4</TD>
  <TD>Item 5</TD>
  <TD>Item 6</TD>
 </TR>
 <TR>
  <TH>Head3</TH>
  <TD>Item 7</TD>
  <TD>Item 8</TD>
  <TD>Item 9</TD>
 </TR>
</TABLE>

Demonstration of Side Headers, Rowspan

Head1 Item 1 Item 2 Item 3 Item 4
Item 5 Item 6 Item 7 Item 8
Head2 Item 9 Item 10 Item 3 Item 11

<TABLE BORDER>
 <TR>
  <TH ROWSPAN=2>Head1</TH>
  <TD>Item 1</TD>
  <TD>Item 2</TD>
  <TD>Item 3</TD>
  <TD>Item 4</TD>
 </TR>
 <TR>
  <TD>Item 5</TD>
  <TD>Item 6</TD>
  <TD>Item 7</TD>
  <TD>Item 8</TD>
 </TR>
 <TR>
  <TH>Head2</TH>
  <TD>Item 9</TD>
  <TD>Item 10</TD>
  <TD>Item 3</TD>
  <TD>Item 11</TD>
 </TR>
</TABLE>

Sample Table Using All of These

    Average
  Height Weight
Gender Males 1.9 0.003
Females 1.7 0.002

<TABLE BORDER>
 <TR>
  <TD>
  <TH ROWSPAN=2></TH>
  <TH COLSPAN=2>Average</TH>
  </TD>
 </TR>
 <TR>
  <TD>
  <TH>Height</TH>
  <TH>Weight</TH>
  </TD>
 </TR>
 <TR>
  <TH ROWSPAN=2>Gender</TH>
  <TH>Males</TH>
  <TD>1.9</TD>
  <TD>0.003</TD>
 </TR>
 <TR>
  <TH>Females</TH>
  <TD>1.7</TD>
  <TD>0.002</TD>
 </TR>
</TABLE>

Clever Uses of Rowspan/Colspan

A 1 2
3 4
C D

<TABLE BORDER>
 <TR>
  <TD ALIGN=center ROWSPAN=2 COLSPAN=2>A</TD>
  <TD>1</TD>
  <TD>2</TD>
 </TR>
 <TR>
  <TD>3</TD>
  <TD>4</TD>
 </TR>
 <TR>
  <TD ALIGN=center ROWSPAN=2 COLSPAN=2>C</TD>
  <TD ALIGN=center ROWSPAN=2 COLSPAN=2>D</TD>
 </TR>
 <TR>
 </TR>
</TABLE>


print this page tell a friend subscribe to newsletter subscribe to rss
Rate this Material: Bad 1 2 3 4 5 Excellent
Browse Pages:  1  2 > >>

HTML and CSS  More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com
Add comments to "Table Examples"