Svetlin Nakov Telerik Corporation
1. HTML Tables Nested Tables Cells Width Cell Spacing and Padding Column and Row Span 2
2. HTML Forms Form Fields Form Controls Text field Text area Select Radio button Checkbox Button Image button 3
Tables represent tabular data A table consists of one or several rows Each row has one or more columns Tables comprised of several core tags: : begin / end the table : create a table row : create tabular data (cell) Tables are losing favor to and, with the CSS revolution 5
Start and end of a table Start and end of a row Start and end of a cell in a row
7 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table> 8
Live Demo
Tables rows split into three sections: heading, body and footer, each containing table rows Divides the table into semantic sections Table sections: denotes table heading denotes collection of table rows that contain the very data denotes table footer but comes BEFORE the tag 10
11 <table><thead> Column heading Column Column heading Column heading heading </thead><tfoot> Column footer Column Column footer Column footer footer </tfoot><tbody> Cell 1 Cell 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 3 Cell 4 </tbody></table> First comes the header Then comes the footer Last comes the body (data)
<table><thead> Column heading Column Column heading Column heading heading </thead><tfoot> Column footer Column Column footer Column footer footer </tfoot><tbody> Cell 1 Cell 2 Cell 1 Cell 2 Cell 3 Cell 4 Cell 3 Cell 4 </tbody></table> 12 table-full.html Although the footer is before the data in the code, it is displayed last
Table data “cells” ( ) can contain nested tables (tables within tables): 13 Contact: Contact: First Name First Name Last Name Last Name </table> nested-tables.html
Live Demo
Tables and cells can have width attribute Width can be given in pixels or percentages 15 Left Left Center Center Right Right </table> table-width.html
Live Demo
cellpadding Defines the empty space around the cell contents cellspacing Defines the empty space between the cells Tables have two important attributes: 17 cellcell cellcell cell cell cell cell
18 <html> Table Cells Table Cells <table cellspacing="15" cellpadding="0" <table cellspacing="15" cellpadding="0" bgcolor="red"> bgcolor="red"> First First Second Second <table cellspacing="0" cellpadding="10" <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> bgcolor="yellow" border="1"> First Second First Second </html> table-cells.html
19 <html> Table Cells Table Cells <table cellspacing="15" cellpadding="0" <table cellspacing="15" cellpadding="0" bgcolor="red"> bgcolor="red"> First First Second Second <table cellspacing="0" cellpadding="10" <table cellspacing="0" cellpadding="10" bgcolor="yellow" border="1"> bgcolor="yellow" border="1"> First Second First Second </html> table-cells.html
Live Demo
rowspan Defines how many rows the cell occupies colspan Defines how many columns the cell occupies Table cells have two important attributes: 21 cell[1,1]cell[1,2] cell[2,1] colspan="1"colspan="1" colspan="2" cell[1,1]cell[1,2] cell[2,1] rowspan="2"rowspan="1" rowspan="1"
22 <html> Colspan and Rowspan Colspan and Rowspan <table cellspacing="0" cellpadding="10" <table cellspacing="0" cellpadding="10" border="1"> border="1"> Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </html> table-colspan-rowspan.html
<html> Colspan and Rowspan Colspan and Rowspan <table cellspacing="0" cellpadding="10" <table cellspacing="0" cellpadding="10" border="1"> border="1"> Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </html> 23 table-colspan-rowspan.html Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]
Entering User Data from a Web Page
Forms are the primary method for gathering data from site visitors Create a form block with Example: 25 <form></form>......</form> The "action" attribute tells where the form data should be sent The “method" attribute tells how the form data should be sent – via GET or POST request
Text fields are single-line entry fields: Text areas can contain multiple lines of text: Hidden fields contain data not shown to user: Often used by JavaScript code 26 This is a multi-line text field This is a multi-line text field
Create a checkbox: Create a radio button: Radio buttons can be grouped, allowing only one to be selected from a group: 27
Pull down menu (drop-down list): Submit button: 28 <option value="Value 1" <option value="Value 1" selected="selected">Male selected="selected">Male Female Female Other Other </select>
Reset button – clears the form Image button – acts like submit but image is displayed instead of button Ordinary button – used for JavaScript, no default action 29
Password input – acts like normal text field but hides the text with * signs Multiple select field – code is like drop down but displays list of items to select 30 <option value="Value 1" <option value="Value 1" selected="selected">keyboard selected="selected">keyboard mouse mouse speakers speakers </select>
31 Degree: Degree: Bachelor of Art Bachelor of Art Bachelor of Science Bachelor of Science Master of Master of Business Administration Business Administration First Name: First Name: Last Name: Last Name: Student ID: Student ID: form.html
32 Gender: Gender: <input name="gender" type="radio" value="Male" <input name="gender" type="radio" value="Male" checked="true" /> Male checked="true" /> Male Female Female <textarea name="terms" cols="30" rows="4" <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form. By clicking the Send Form button you agree to submit this form. </form> form.html (continuation)
Gender: Gender: <input name="gender" type="radio" value="Male" <input name="gender" type="radio" value="Male" checked="true" /> Male checked="true" /> Male Female Female <textarea name="terms" cols="30" rows="4" <textarea name="terms" cols="30" rows="4" readonly="true">TERMS AND CONDITIONS readonly="true">TERMS AND CONDITIONS By clicking the Send Form button you agree to submit this form. By clicking the Send Form button you agree to submit this form. </form> form.html (continuation) 33
, and, and
Frames provide a way to show multiple HTML documents in a single Web page The page is split into multiple parts horizontally or vertically 35 <html> Frames Example Frames Example </html> frames.html
Embedded frames provide a way to show one Web site inside another Web site: 36 <html> IFrame Example IFrame Example </html> iframe-demo.html
Questions?