html tables examples

AC I-Unit 1: HTML Tables - Examples

Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } of 14

HTML Tables Examples

1. Write HTML code to create the following table:

Table of Dog Breeds

Breed Description Group Organization

French Bulldog Loyal Companion Non-Sporting

All listed dogs are AKC recognized Wheaten Terrier High energy, friendly Terrier

English Pointer Hunting companion Sporting

Australian Cattle Dog Guarding, herding Working

Source Code:

<TABLE BORDER = "1">

<!—Row 1 – heading -->

<TR>

<TH COLSPAN="4">Table of Dog Breeds</TH>

</TR>

<!—Row 2 – heading -->

<TR>

<TH>Breed</TH>

<TH>Description</TH>

<TH>Group</TH>

<TH>Organization</TH>

</TR>

<!—Row 3 -->

<TR>

<TD>French Bulldog</TD>

<TD>Loyal Companion</TD>

<TD>Non-Sporting</TD>

<TD ROWSPAN = "5">All listed dogs are AKC recognized</TD>

</TR>

<!—Row 4 -->

<TR>

<TD>Wheaten Terrier</TD>

<TD>High energy, friendly</TD>

<TD>Terrier</TD>

</TR>

<!—Row 5 -->

<TR>

<TD>English Pointer</TD>

<TD>Hunting companion</TD>

<TD>Sporting</TD>

</TR>


of 14 [email protected]

<!—Row 6 -->

<TR>

<TD>Australian Cattle Dog</TD>

<TD>Guarding, herding</TD>

<TD>Working</TD>

</TR>

</TABLE>


Items Order Form

Item Price Quantity

DVD 10 10

Mouse 100 12

Pen Drive 300 5

Source Code:

<TABLE BORDER = "1">

<CAPTION>Items Order Form</CAPTION>

<TR>

<TD WIDTH = 80>Item</TD>

<TD WIDTH = 80>Price</TD>

<TD WIDTH = 80>Quantity</TD>

</TR>

<TR>

<TD>DVD</TD>

<TD ALIGN = center>10</TD>

<TD ALIGN = CENTER>10</TD></TR>

</TR>

<TR>

<TD>Mouse</TD>

<TD ALIGN = CENTER>100</TD>

<TD ALIGN = CENTER>12</TD></TR>

</TR>

<TR>

<TD>Pen Drive</TD>

<TD ALIGN = CENTER>300</TD>

<TD ALIGN = CENTER>5</td></TR>

</TR>

</TABLE>




Banner

column 1 column 2

Source Code:

<BODY>

<DIV ALIGN="CENTER">

<TABLE WIDTH="650" BORDER="1">

<TR>

<TD COLSPAN="2" HEIGHT="50">banner</TD>

</TR>

<TR>

<TD WIDTH="20%" HEIGHT="250">column 1</TD>

<TD>column 2</TD>

</TR>

</TABLE>

</DIV>

</BODY>

4. Write HTML code to create the following stacked tables:

Banner

Button 1 Button 2 Button 3 Button 4 Button 5

Graphic Graphic Graphic

Column 1 Column 2 Column 3

Source Code:


<TR>



<TD COLSPAN="5"><H1>Banner</H1></TD>

</TR>

<TR>

<TD>Button 1</TD>

<TD>Button 2</TD>

<TD>Button 3</TD>

<TD>Button 4</TD>

<TD>Button 5</TD>

</TR>

</TABLE>

<BR>

<!—Next table starts here -- >


<TR>

<TD>Graphic</TD>

<TD>Graphic</TD>

<TD>Graphic</TD>

</TR>

<TR HEIGHT="300">

<TD WIDTH="33%"><P>Column 1</P></TD>



</TR>

</TABLE>


Column 1

Column 2-Top Column 3-Top

Column 2-Bottom Column 3-Bottom

Source Code:

<TABLE WIDTH="750" BORDER="1" HEIGHT="300">

<TR>

<TD ROWSPAN="2" WIDTH="20%">Column 1</TD>

<TD>Column 2-Top</TD>

<TD>Column 3-Top</TD>

</TR>

<TR>

<TD>Column 2-Bottom</TD>



<TD>Column 3-Bottom</TD>

</TR>

</TABLE>


Column 1

Column 2-A

Column 3

Column 2-B

Source Code:

<TABLE WIDTH="650" BORDER="1" HEIGHT="300">

<TR>


<TD WIDTH="70%">Column 2-A</TD>


</TR>

<TR>

<TD>Column 2-B</TD>

</TR>

</TABLE>

7. Write HTML code to create the following tables: Cell that spans two columns:

Name Telephone

Bill Gates 555 77 854 555 77 855

Cell that spans two rows:

First Name: Bill Gates

Telephone: 555 77 854

555 77 855




This is a paragraph

This is another paragraph

This cell contains a table:

A B

C D

This cell contains a list

• apples

• bananas

• pineapples

HELLO

Source Code:

<TABLE BORDER="1">

<TR>

<TD>

<P>This is a paragraph</P>

<P>This is another paragraph</P>

</TD>

<TD>This cell contains a table:

<TABLE BORDER="1">

<TR>

<TD>A</TD>

<TD>B</TD>

</TR>

<TR>

<TD>C</TD>

<TD>D</TD>

</TR>

</TABLE>

</TD>

</TR>

<TR>

<TD>This cell contains a list

<UL>

<LI>apples</LI>

<LI>bananas</LI>

<LI>pineapples</LI>

</UL>

</TD>

<TD>HELLO</TD>

</TR>

</TABLE>


Item 1 Item 2 Item 3



Item 4 Item 5

<TABLE BORDER = "1" width = 500>

<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>

10. Write HTML code to create the following table (multiple headers and

colspan):

Head1 Head2

Head 3 Head 4 Head 5 Head 6

A B C D

E F G H

<TABLE BORDER = 1>

<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>



11. Write HTML code to create the telephone bill:

Telephone Bill

Subscriber’s Name

and Address Consumer no P.O.Stamp

Leena P, Cross

Roads

Off Haji Ali Road.

PL 0051077

Telephone

no Type Bill date Due Date Pay By Date

575077 Genl res

Perm 01- Aug-2001 18-Aug-2001 25-Aug-2001

OPENING

METER

READING

CLOSING

METER

READING

METERED

CALLS

DEBIT

CALLS

CREDIT

CALLS

FREE

CALLS

CHARGEABLE

CALLS

1052 1297 245 0 0 150 95

DETAILS ITEM PERIOD AMOUNT

Rate No. of

Calls Charge Rent

10/09/97

to

31/10/98

200.00

0.80 95 76 ITEM

16/05/97

to

15/07/97

76.00

SURCHARGE AFTER

PAY BY DATE 10

TKP/PG

CALLS

16/05/97

to

15/07/97

0.00

AMT ON/ BEFORE PAY

BY DATE 290

ITX

CALLS

16/05/97

to

15/07/97

0.00

AMT AFTER PAY BY

DATE 300 MISC TAX 14.00

TOTAL 290.00

ADDRESS

PLEASE PAY BEFORE DUE DATE

AND AVOID DISCONNECTION

E & O.E. PLEASE SEE OVERLEAF FOR

CODES / INSTRUCTIONS Accounts Officer

<html>

<head>

<title>Telephone Bill</title>

</head>

<body>

<h2>Telephone Bill</h2>

<br>

<table border="1" cellspacing="0" cellpadding="0" align = center

>



<tr>

<td width="182" colspan="3"

align="center"><b><u>Subscriber’s Name and Address</u></b></td>

<td width="131" colspan="2" align = "center"><B>Consumer

no</b></td>

<td width="289" colspan="4"><h3><u>P.O.Stamp</u></h3></td>

</tr>



<tr>

<td width="182" colspan="3" align="center">Leena P, Cross

Roads<p align="center">Off Haji Ali Road.</td>

<td width="131" colspan="2" align = "center">PL 0051077</td>

<td width="71" align="center"> </td>

<td width="91" colspan="2" align="center"> </td>

<td width="126" align="center"> </td>

</tr>



<tr>

<td width="92" align="center">Telephone no</td>

<td width="90" colspan="2" align="center">Type</td>

<td width="131" colspan="2" align="center">Bill date</td>

<td width="162" colspan="3" align="center">Due Date</td>

<td width="126" align="center">Pay By Date</td>

</tr>



<tr>

<td width="92" align="center">575077</td>

<td width="90" colspan="2" align="center">Genl res Perm</td>

<td width="131" colspan="2" align="center">01- Aug-2001</td>

<td width="162" colspan="3" align="center">18-Aug-2001</td>

<td width="126" align="center">25-Aug-2001</td>

</tr>



<tr>

<td width="92" align="center">OPENING METER READING</td>

<td width="90" colspan="2" align="center">CLOSING METER

READING</td>

<td width="65" align="center">METERED CALLS</td>

<td width="66" align="center">DEBIT CALLS</td>

<td width="78" colspan="2" align="center">CREDIT CALLS</td>

<td width="85" align="center">FREE CALLS</td>

<td width="126" align="center">CHARGEABLE CALLS</td>

</tr>



<tr>


<td width="90" colspan="2" align="center">1297</td>






</tr>



<tr>

<td width="313" colspan="5" align="center">DETAILS</td>

<td width="78" colspan="2" align="center">ITEM</td>

<td width="85" align="center">PERIOD</td>

<td width="126" align="center">AMOUNT</td>

</tr>



<tr>

<td width="92" align="center">Rate</td>

<td width="89" align="center">No. of Calls</td>

<td width="132" colspan="3" align="center">Charge</td>

<td width="78" colspan="2" align="center">Rent</td>

<td width="85" align="center">10/09/97 <br> to

<br>31/10/98</td>

<td width="126" align="center">200.00</td>

</tr>



<tr>




<td width="78" colspan="2" align="center">ITEM</td>

<td width="85" align="center">16/05/97 <br> to <br>

15/07/97</td>


</tr>



<tr>

<td width="181" colspan="2" align="center">SURCHARGE AFTER

PAY BY DATE</td>


<td width="78" colspan="2" align="center">TKP/PG CALLS</td>


15/07/97</td>


</tr>



<tr>

<td width="181" colspan="2" align="center">AMT ON/

BEFORE PAY BY DATE</td>


<td width="78" colspan="2" align="center">ITX CALLS</td>


15/07/97</td>


</tr>



<tr>

<td width="181" colspan="2" align="center">AMT AFTER PAY BY

DATE</td>


<td width="78" colspan="2" align="center">MISC</td>

<td width="85" align="center">TAX</td>


</tr>



<tr>



<td width="162" colspan="3" align="center">TOTAL</td>


</tr>



<tr>

<td width="313" colspan="5"> </td>

<td width="162" colspan="3">ADDRESS</td>

<td width="126"> </td>

</tr>



<tr>

<td width="313" colspan="5"> </td>

<td width="289" colspan="4">PLEASE PAY BEFORE DUE DATE AND

AVOID DISCONNECTION<p> </td>

</tr>



<tr>

<td width="313" colspan="5">E & O.E. PLEASE SEE OVERLEAF

FOR CODES / INSTRUCTIONS</td>

<td width="289" colspan="4"> Accounts Officer</td>

</tr>

</table>

</body>

</html>

12. Write HTML code to display the calendar for the month of April 2004 in

the following format

April 2004 ABC CORP 04 - 2004

SUN 4 11 18 25

MON

5 12 19 26

TUE

6 13 20 27

WED

7 14 21 28

THUR 1 8 15 22 29

FRI 2 9 16 23 30

SAT 3 10 17 24

Sponsors

APRIL 2004

13. Write an html page to display the following table



T.Y.B.Sc.

Department of Computer Science

Main Applied Component

Data Communication

DBMS Web Design Advanced Java

Operating System

Linux

SSAD

Web Technology OOAD

Data communication & Networking

Author Name price

Behrouz

Forouzan

DCN 300/-

TCP/IP 350/-

Andrew s.

Tanenbaum Networking 400/-

William

Stallings

Computer

Communication &

Networking

400/-

Total Cost

(total 4 books) Rs.1450/-

Operating System

Author Name Price

Andrew s.

Tanenbaum

Operating

system

500/-

William

Stallings

Operating

system

Concepts

Total Rs.1000/-

14. Create an HTML page, which should look like follows.

1. The HTML page should have an appropriate title. The data within the table should be

center aligned. Demonstrate the program to the examiner. Take a printout of the HTML

code and attach with your answer sheet.

2. Explain all the HTML tags and the attributes that you have used in the above program.

This is a simple table for which you have to give the code.

HTML ASP CFML

Hyper Text Markup

Language

Active Server Pages Cold Fusion Markup

Language

HTML 4.0 ASP 2.0 CFML 5.0

This is a table using Rowspan and Colspan



No. of Students Total

288 Year Year Year

2001 2002 2003

58 96 154

COMPUTER SCIENCE

html tables examples

Education