Downloaded 1,368 times
![Column and Row Span
Table cells have two important attributes:
colspan rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
cell[1,1] cell[1,2] cell[1,2]
cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
Defines how Defines how
many columns many rows the
the cell occupies cell occupies
21](https://image.slidesharecdn.com/3-2-html-tables-forms-110302100533-phpapp02/85/HTML-Tables-and-Forms-21-320.jpg)
![Column and Row Span – Example
table-colspan-rowspan.html
<html>
<head><title>Colspan and Rowspan</title></head>
<body>
<br/>
<table cellspacing="0" cellpadding="10"
border="1">
<tr bgcolor="yellow"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr bgcolor="#FFCC66"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr bgcolor="#CCCCFF"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
</body>
</html>
22](https://image.slidesharecdn.com/3-2-html-tables-forms-110302100533-phpapp02/85/HTML-Tables-and-Forms-22-320.jpg)
![Column and Row Span –
table-colspan-rowspan.html
Example (2)
<html>
<head><title>Colspan and Rowspan</title></head>
<body>
<br/>
<table cellspacing="0" cellpadding="10"
border="1">
<tr bgcolor="yellow"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
Cell[1,1] Cell[2,1]
<tr bgcolor="#FFCC66"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
Cell[1,2] Cell[3,2]
<tr bgcolor="#CCCCFF"><td>Cell[1,3]</td>
Cell[2,2]
<td>Cell[2,3]</td></tr>
</table> Cell[1,3] Cell[2,3]
</body>
</html>
23](https://image.slidesharecdn.com/3-2-html-tables-forms-110302100533-phpapp02/85/HTML-Tables-and-Forms-23-320.jpg)
Uploaded byBG Java EE Course
HTML: Tables and Forms
The document discusses HTML tables and forms. It covers core table tags like <table>, <tr>, and <td> and how to structure tables with headers, bodies, and footers. It also explains how to customize tables using attributes like cellspacing, cellpadding, colspan, and rowspan. For forms, it describes common form controls like text fields, textareas, radio buttons, checkboxes and how to lay them out in a form with a submit button. It provides an example form to demonstrate these concepts.
More Related Content
Similar to HTML: Tables and Forms
HTML: Tables and Forms
- 1. HTML – Tablesand Forms Svetlin Nakov Telerik Corporation www.telerik.com
- 2. Contents 1. HTML Tables Nested Tables Cells Width Cell Spacing and Padding Column and Row Span 2
- 3. Contents (2) 2. HTML Forms Form Fields Form Controls Text field Text area Select Radio button Checkbox Button Image button 3
- 4.
- 5. HTML Tables Tablesrepresent tabular data A table consists of one or several rows Each row has one or more columns Tables comprised of several core tags: <table></table>: begin / end the table <tr></tr>: create a table row <td></td>: create tabular data (cell) Tables are losing favor to <div> and <span>, with the CSS revolution 5
- 6. HTML Tables (2) Start and end of a table <table> ... </table> Start and end of a row <tr> ... </tr> Start and end of a cell in a row <td> ... </td> 6
- 7. Simple HTML Tables– Example <table border="1" cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr> </table> 7
- 8. Simple HTML Tables– Example (2) <table border="1" cellspacing="0" cellpadding="5"> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture1.ppt">Lecture 1</a></td> </tr> <tr> <td><img src="ppt.gif"></td> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr> </table> 8
- 9. Simple HTML Tables Live Demo
- 10. Complete HTML Tables Tables rows split into three sections: heading, body and footer, each containing table rows Divides the table into semantic sections Table sections: <thead> denotes table heading <tbody> denotes collection of table rows that contain the very data <tfoot> denotes table footer but comes BEFORE the <tbody> tag 10
- 11. Complete HTML Table:Example <table> First comes the header <thead> <tr><td>Column heading</td><td>Column heading</td></tr> </thead> Then comes the footer <tfoot> <tr><td>Column footer</td><td>Column footer</td></tr> </tfoot> Last comes the body (data) <tbody> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </tbody> </table> 11
- 12. Complete HTML Table: Example (2) <table> table-full.html <thead> <tr><td>Column heading</td><td>Column heading</td></tr> </thead> <tfoot> <tr><td>Column footer</td><td>Column footer</td></tr> </tfoot> <tbody> <tr><td>Cell 1</td><td>Cell 2</td></tr> Although the footer is <tr><td>Cell 3</td><td>Cell 4</td></tr> </tbody> before the data in the </table> code, it is displayed last 12
- 13. Nested Tables Table data “cells” (<td>) can contain nested tables (tables within tables): <table border="1"> nested-tables.html <tr> <td>Contact:</td> <td> <table border="1"> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr> </table> 13
- 14. Nested Tables Live Demo
- 15. Cells Width Tables and cells can have width attribute Width can be given in pixels or percentages table-width.html <table border="1" width="100%" cellspacing="0"> <tr> <td>Left</td> <td width="100%" align="center">Center</td> <td>Right</td> </tr> </table> 15
- 16. Table Width Live Demo
- 17. Cell Spacing andPadding Tables have two important attributes: cellspacing cellpadding cell cell cell cell cell cell cell cell Defines the Defines the empty empty space space around the cell between the cells contents 17
- 18. Cell Spacing andPadding – Example table-cells.html <html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0" bgcolor="red"> <tr><td bgcolor="yellow">First</td> <td bgcolor="yellow">Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> 18
- 19. Cell Spacing andPadding – Example (2) table-cells.html <html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0" bgcolor="red"> <tr><td bgcolor="yellow">First</td> <td bgcolor="yellow">Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> <tr><td>First</td><td>Second</td></tr> </table> </body> </html> 19
- 20. Table Cell Spacing and Cell Padding Live Demo
- 21. Column and RowSpan Table cells have two important attributes: colspan rowspan colspan="1" colspan="1" rowspan="2" rowspan="1" cell[1,1] cell[1,2] cell[1,2] cell[1,1] cell[2,1] cell[2,1] colspan="2" rowspan="1" Defines how Defines how many columns many rows the the cell occupies cell occupies 21
- 22. Column and RowSpan – Example table-colspan-rowspan.html <html> <head><title>Colspan and Rowspan</title></head> <body> <br/> <table cellspacing="0" cellpadding="10" border="1"> <tr bgcolor="yellow"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr bgcolor="#FFCC66"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr bgcolor="#CCCCFF"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> </body> </html> 22
- 23. Column and RowSpan – table-colspan-rowspan.html Example (2) <html> <head><title>Colspan and Rowspan</title></head> <body> <br/> <table cellspacing="0" cellpadding="10" border="1"> <tr bgcolor="yellow"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> Cell[1,1] Cell[2,1] <tr bgcolor="#FFCC66"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> Cell[1,2] Cell[3,2] <tr bgcolor="#CCCCFF"><td>Cell[1,3]</td> Cell[2,2] <td>Cell[2,3]</td></tr> </table> Cell[1,3] Cell[2,3] </body> </html> 23
- 24. HTML Forms Entering UserData from a Web Page
- 25. HTML Forms Formsare the primary method for gathering data from site visitors Create a form block with <form></form> The “method" attribute tells how the form data should be sent – Example: via GET or POST request <form name="myForm" method="post" action="path/to/some-script.php"> ... </form> The "action" attribute tells where the form data should be sent 25
- 26. Form Fields Text fields are single-line entry fields: <input type="text" name="FirstName" value="This is a text field"> Text areas can contain multiple lines of text: <textarea name="Comments">This is a multi-line text field</textarea> Hidden fields contain data not shown to user: <input type="hidden" name="Account" value="This is a hidden text field"> Often used by JavaScript code 26
- 27. Form Input Controls Create a checkbox: <input type="checkbox" name="fruit" value="apple"> Create a radio button: <input type="radio" name="title" value="Mr."> Radio buttons can be grouped, allowing only one to be selected from a group: <input type="radio" name="town" value="Sofia"> <input type="radio" name="town" value="Varna"> 27
- 28. Other Form Controls Pull down menu (drop-down list): <select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option> </select> Submit button: <input type="submit" name="submitBtn" value="Apply Now"> 28
- 29. Other Form Controls(2) Reset button – clears the form <input type="reset" name="resetBtn" value="Clear the form"> Image button – acts like submit but image is displayed instead of button <input type="image" src="submit.gif" name="submitBtn" alt="Submit"> Ordinary button – used for JavaScript, no default action <input type="button" value="simple button"> 29
- 30. Other Form Controls(3) Password input – acts like normal text field but hides the text with * signs <input type="password" name="pass" value=""> Multiple select field – code is like drop down but displays list of items to select <select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option> <option value="Value 3">speakers</option> </select> 30
- 31. HTML Forms –Example form.html <form method="POST" action="apply-now.php"> <input name="subject" type="hidden" value="Class" /> <p>Degree: <select name="degree"> <option value="BA">Bachelor of Art</option> <option value="BS">Bachelor of Science</option> <option value="MBA" selected="true">Master of Business Administration</option> </select> </p> <p> First Name: <input type="text" name="firstname" /> </p> <p> Last Name: <input type="text" name="lastname" /> </p> <p> Student ID: <input type="password" name="studentid" /> </p> 31
- 32. HTML Forms –Example (2) form.html (continuation) <p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p> </form> 32
- 33. HTML Forms –Example (3) form.html (continuation) <p> Gender: <input name="gender" type="radio" value="Male" checked="true" /> Male <input name="gender" type="radio" value="Female" /> Female </p> <p> E-mail: <input type="text" name="email" value="" /> </p> <p> <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form.</textarea> </p> <p> <input type="submit" name="button" value="Send Form" /> </p> </form> 33
- 34. HTML Frames <frameset>, <frame>and <iframe>
- 35. HTML Frames Framesprovide a way to show multiple HTML documents in a single Web page The page is split into multiple parts horizontally or vertically <html> <head><title>Frames Example</title></head> <frameset cols="25%,*,25%"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset> </html> frames.html 35
- 36. Embedded Frames: <iframe> Embedded frames provide a way to show one Web site inside another Web site: iframe-demo.html <html> <head><title>IFrame Example</title></head> <iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe> </html> 36
- 37. HTML – Tablesand Forms Questions? http://academy.telerik.com