• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html tables   examples
 

Html tables examples

on

  • 1,089 views

HTML tables

HTML tables

Statistics

Views

Total Views
1,089
Views on SlideShare
1,089
Embed Views
0

Actions

Likes
0
Downloads
5
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Html tables   examples Html tables examples Document Transcript

    • 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
    • AC I-Unit 1: HTML Tables - Examples <!—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: Page 2 of 14 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples 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: <TABLE WIDTH="650" BORDER="1"> <TR> Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 3 of 14
    • AC I-Unit 1: HTML Tables - Examples <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 -- > <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 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 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples <TD>Column 3-Bottom</TD> </TR> </TABLE> 6. Write HTML code to create the following table: Column 2-A Column 1 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 Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 5 of 14
    • AC I-Unit 1: HTML Tables - Examples 8. Write HTML code to create the following table: 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> 9. Write HTML code to create the following table: Item 1 Page 6 of 14 Item 2 Item 3 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples 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> Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 7 of 14
    • AC I-Unit 1: HTML Tables - Examples 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 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples <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">&nbsp;</td> <td width="91" colspan="2" align="center">&nbsp;</td> <td width="126" align="center">&nbsp;</td> </tr> <!-- Row <tr> <td <td <td <td <td </tr> 3 --> <!-- Row <tr> <td <td <td <td <td </tr> 4 --> 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> <!-- 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> Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 9 of 14
    • AC I-Unit 1: HTML Tables - Examples <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> <!-- Row <tr> <td <td <td <td <td <td <td </tr> 6 --> <!-- Row <tr> <td <td <td <td </tr> 7 --> width="92" align="center">1052</td> width="90" colspan="2" align="center">1297</td> width="65" align="center">245</td> width="66" align="center">0</td> width="78" colspan="2" align="center">0</td> width="85" align="center">150</td> width="126" align="center">95</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> <!-- 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> Page 10 of 14 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples <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 &nbsp; 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 <tr> <td <td <td <td </tr> 13 --> <!-- Row <tr> <td <td <td </tr> 14 --> width="181" width="132" width="162" width="126" colspan="2" align="center">&nbsp;</td> colspan="3" align="center">&nbsp;</td> colspan="3" align="center">TOTAL</td> align="center">290.00</td> width="313" colspan="5">&nbsp;</td> width="162" colspan="3">ADDRESS</td> width="126">&nbsp;</td> <!-- Row 15 --> <tr> <td width="313" colspan="5">&nbsp;</td> <td width="289" colspan="4">PLEASE PAY BEFORE DUE DATE AND AVOID DISCONNECTION<p>&nbsp;</td> Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } Page 11 of 14
    • AC I-Unit 1: HTML Tables - Examples </tr> <!-- Row <tr> <td FOR <td </tr> 16 --> width="313" colspan="5">E &amp; O.E. PLEASE SEE OVERLEAF CODES / INSTRUCTIONS</td> width="289" colspan="4">&nbsp;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 mukeshtekwani@hotmail.com
    • AC I-Unit 1: HTML Tables - Examples 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 Prof. Mukesh N. Tekwani {Mobile: 9869 488 356 } CFML Cold Fusion Markup Language CFML 5.0 Page 13 of 14
    • AC I-Unit 1: HTML Tables - Examples No. of Students Year Year Year 2001 2002 2003 58 96 154 Total 288 COMPUTER SCIENCE Page 14 of 14 mukeshtekwani@hotmail.com