html tables examples
Post on 03-Nov-2014
17 Views
Preview:
DESCRIPTION
TRANSCRIPT
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 1 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>
AC I-Unit 1: HTML Tables - Examples
Page 2 of 14 mukeshtekwani@hotmail.com
<!—Row 6 -->
<TR>
<TD>Australian Cattle Dog</TD>
<TD>Guarding, herding</TD>
<TD>Working</TD>
</TR>
</TABLE>
2. Write HTML code to create the following 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>
3. Write HTML code to create the following table:
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 3 of 14
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:
<TABLE WIDTH="650" BORDER="1">
<TR>
AC I-Unit 1: HTML Tables - Examples
Page 4 of 14 mukeshtekwani@hotmail.com
<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 -- >
<TABLE WIDTH="650" BORDER="1">
<TR>
<TD>Graphic</TD>
<TD>Graphic</TD>
<TD>Graphic</TD>
</TR>
<TR HEIGHT="300">
<TD WIDTH="33%"><P>Column 1</P></TD>
<TD WIDTH="33%"><P>Column 2</P></TD>
<TD WIDTH="33%"><P>Column 3</P></TD>
</TR>
</TABLE>
5. Write HTML code to create the following 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>
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 5 of 14
<TD>Column 3-Bottom</TD>
</TR>
</TABLE>
6. Write HTML code to create the following table:
Column 1
Column 2-A
Column 3
Column 2-B
Source Code:
<TABLE WIDTH="650" BORDER="1" HEIGHT="300">
<TR>
<TD ROWSPAN="2" WIDTH="15%">Column 1</TD>
<TD WIDTH="70%">Column 2-A</TD>
<TD ROWSPAN="2" WIDTH="15%">Column 3</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
AC I-Unit 1: HTML Tables - Examples
Page 6 of 14 mukeshtekwani@hotmail.com
8. Write HTML code to create the following table:
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>
9. Write HTML code to create the following table:
Item 1 Item 2 Item 3
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 7 of 14
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>
AC I-Unit 1: HTML Tables - Examples
Page 8 of 14 mukeshtekwani@hotmail.com
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>
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 9 of 14
<body>
<h2>Telephone Bill</h2>
<br>
<table border="1" cellspacing="0" cellpadding="0" align = center
>
<!-- Row 1 -->
<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>
<!-- Row 2 -->
<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>
<!-- Row 3 -->
<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>
<!-- Row 4 -->
<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>
<!-- Row 5 -->
<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>
AC I-Unit 1: HTML Tables - Examples
Page 10 of 14 mukeshtekwani@hotmail.com
<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>
<!-- Row 6 -->
<tr>
<td width="92" align="center">1052</td>
<td width="90" colspan="2" align="center">1297</td>
<td width="65" align="center">245</td>
<td width="66" align="center">0</td>
<td width="78" colspan="2" align="center">0</td>
<td width="85" align="center">150</td>
<td width="126" align="center">95</td>
</tr>
<!-- Row 7 -->
<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>
<!-- Row 8 -->
<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>
<!-- Row 9 -->
<tr>
<td width="92" align="center">0.80</td>
<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>
<td width="126" align="center">76.00</td>
</tr>
<!-- Row 10 -->
<tr>
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 11 of 14
<td width="181" colspan="2" align="center">SURCHARGE AFTER
PAY BY DATE</td>
<td width="132" colspan="3" align="center">10</td>
<td width="78" colspan="2" align="center">TKP/PG CALLS</td>
<td width="85" align="center">16/05/97 <br> to <br>
15/07/97</td>
<td width="126" align="center">0.00</td>
</tr>
<!-- Row 11 -->
<tr>
<td width="181" colspan="2" align="center">AMT ON/
BEFORE PAY BY DATE</td>
<td width="132" colspan="3" align="center">290</td>
<td width="78" colspan="2" align="center">ITX CALLS</td>
<td width="85" align="center">16/05/97 <br> to <br>
15/07/97</td>
<td width="126" align="center">0.00</td>
</tr>
<!-- Row 12 -->
<tr>
<td width="181" colspan="2" align="center">AMT AFTER PAY BY
DATE</td>
<td width="132" colspan="3" align="center">300</td>
<td width="78" colspan="2" align="center">MISC</td>
<td width="85" align="center">TAX</td>
<td width="126" align="center">14.00</td>
</tr>
<!-- Row 13 -->
<tr>
<td width="181" colspan="2" align="center"> </td>
<td width="132" colspan="3" align="center"> </td>
<td width="162" colspan="3" align="center">TOTAL</td>
<td width="126" align="center">290.00</td>
</tr>
<!-- Row 14 -->
<tr>
<td width="313" colspan="5"> </td>
<td width="162" colspan="3">ADDRESS</td>
<td width="126"> </td>
</tr>
<!-- Row 15 -->
<tr>
<td width="313" colspan="5"> </td>
<td width="289" colspan="4">PLEASE PAY BEFORE DUE DATE AND
AVOID DISCONNECTION<p> </td>
AC I-Unit 1: HTML Tables - Examples
Page 12 of 14 mukeshtekwani@hotmail.com
</tr>
<!-- Row 16 -->
<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
AC I-Unit 1: HTML Tables - Examples
Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 13 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 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
AC I-Unit 1: HTML Tables - Examples
Page 14 of 14 mukeshtekwani@hotmail.com
No. of Students Total
288 Year Year Year
2001 2002 2003
58 96 154
COMPUTER SCIENCE
top related