Html tables examples

AC I-Unit 1: HTML Tables - Examples

HTML Tables
Examples
1. Write HTML code to create the following table:
Table of Dog Breeds
Breed

Description

Group

French Bulldog

Loyal Companion

Wheaten Terrier

High energy, friendly Terrier

English Pointer

Hunting companion

Australian Cattle Dog Guarding, herding

Organization

Non-Sporting
Sporting

All listed dogs are AKC recognized

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>
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 }

Page 1 of 14

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

Page 2 of 14

mukeshtekwani@hotmail.com


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

Graphic

Graphic

Graphic

Column 1

Column 2

Button 5

Column 3

Source Code:
<TR>

Page 3 of 14

<TD COLSPAN="5"><H1>Banner</H1></TD>
</TR>
<TR>
<TD>Button
<TD>Button
<TD>Button
<TD>Button
<TD>Button
</TR>
</TABLE>

1</TD>
2</TD>
3</TD>
4</TD>
5</TD>

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

Column 3-Top

Column 2-Bottom

Column 3-Bottom

Column 1

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>
Page 4 of 14


<TD>Column 3-Bottom</TD>
</TR>
</TABLE>


Column 2-A
Column 1

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


Page 5 of 14


This is a paragraph

This cell contains a table:
AB

This is another paragraph C D
This cell contains a list
• apples
HELLO
• bananas
• pineapples
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
Page 6 of 14

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>

Page 7 of 14


11.Write HTML code to create the telephone bill:
Telephone Bill
Subscriber’s Name
and Address
Leena P, Cross
Roads
Off Haji Ali Road.
Telephone
Type
no
Genl res
575077
Perm
OPENING
CLOSING
METER
METER
READING
READING
1052
1297
DETAILS

Consumer no

P.O.Stamp

PL 0051077
Bill date

Due Date

Pay By Date

01- Aug-2001

18-Aug-2001

25-Aug-2001

METERED DEBIT
CALLS CALLS

CREDIT
CALLS

FREE
CALLS

CHARGEABLE
CALLS

245

0
ITEM

150
PERIOD
10/09/97
to
31/10/98
16/05/97
to
15/07/97
16/05/97
to
15/07/97
16/05/97
to
15/07/97

95
AMOUNT

TAX

14.00

0

Rate

No. of
Calls

Charge

Rent

0.80

95

76

ITEM

10

TKP/PG
CALLS

SURCHARGE AFTER
PAY BY DATE

AMT ON/ BEFORE PAY
290
BY DATE

ITX
CALLS

AMT AFTER PAY BY
DATE

MISC

300

200.00

76.00

0.00

0.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>
Page 8 of 14


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




width="92" align="center">Telephone no</td>
width="90" colspan="2" align="center">Type</td>
width="131" colspan="2" align="center">Bill date</td>
width="162" colspan="3" align="center">Due Date</td>
width="126" align="center">Pay By Date</td>

width="92" align="center">575077</td>
width="90" colspan="2" align="center">Genl res Perm</td>
width="131" colspan="2" align="center">01- Aug-2001</td>
width="162" colspan="3" align="center">18-Aug-2001</td>
width="126" align="center">25-Aug-2001</td>


<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>
Page 9 of 14

<td
<td
<td
<td

width="66" align="center">DEBIT CALLS</td>
width="78" colspan="2" align="center">CREDIT CALLS</td>
width="85" align="center">FREE CALLS</td>
width="126" align="center">CHARGEABLE CALLS</td>

</tr>




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

width="313" colspan="5" align="center">DETAILS</td>
width="78" colspan="2" align="center">ITEM</td>
width="85" align="center">PERIOD</td>
width="126" align="center">AMOUNT</td>


<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="89" align="center">95</td>
<td width="132" colspan="3" align="center">76</td>
<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>
Page 10 of 14

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




width="181"
width="132"
width="162"
width="126"

colspan="2" align="center"> </td>
colspan="3" align="center"> </td>
colspan="3" align="center">TOTAL</td>
align="center">290.00</td>

width="313" colspan="5"> </td>
width="162" colspan="3">ADDRESS</td>
width="126"> </td>


<tr>
<td width="313" colspan="5"> </td>
<td width="289" colspan="4">PLEASE PAY BEFORE DUE DATE AND
AVOID DISCONNECTION<p> </td>
Page 11 of 14

</tr>

width="313" colspan="5">E & O.E. PLEASE SEE OVERLEAF
CODES / INSTRUCTIONS</td>
width="289" colspan="4"> Accounts Officer</td>

</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
Page 12 of 14

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
Behrouz
Forouzan
Andrew s.
Tanenbaum

Name

price

DCN

300/-

TCP/IP

350/-

Networking

400/-

William
Stallings

Computer
Communication &
Networking

Total Cost
(total 4 books)

Operating System
Author

Name

Price

Andrew s.
Tanenbaum

Operating
system

William
Stallings

Operating
system
Concepts

Total

Rs.1000/-

500/-

Rs.1450/-

400/-

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
Hyper Text Markup
Active Server Pages
Language
HTML 4.0
ASP 2.0
This is a table using Rowspan and Colspan


CFML
Cold Fusion Markup
Language
CFML 5.0

Page 13 of 14

No. of Students
Year
Year
Year
2001
2002
2003
58
96
154

Total
288

COMPUTER SCIENCE

Page 14 of 14


Html tables examples

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Html tables examples

Ähnlich wie Html tables examples (20)

Mehr von Mukesh Tekwani

Mehr von Mukesh Tekwani (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Html tables examples