Download presentation
Presentation is loading. Please wait.
1
Svetlin Nakov Telerik Corporation www.telerik.com
2
1. HTML Tables Nested Tables Cells Width Cell Spacing and Padding Column and Row Span 2
3
2. HTML Forms Form Fields Form Controls Text field Text area Select Radio button Checkbox Button Image button 3
5
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
6
Start and end of a table Start and end of a row Start and end of a cell in a row 6......
7
7 Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table>
8
Lecture 1 Lecture 1 Lecture 2 Lecture 2 Lecture 2 - Demos Lecture 2 - Demos </table> 8
9
Live Demo
10
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
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)
12
<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
13
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
14
Live Demo
15
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
16
Live Demo
17
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
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
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
20
Live Demo
21
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"
![ 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](http://images.slideplayer.com./25/8163109/slides/slide_21.jpg " 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
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
![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](http://images.slideplayer.com./25/8163109/slides/slide_22.jpg "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")
23
<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]
![<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]](http://images.slideplayer.com./25/8163109/slides/slide_23.jpg "<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]")
24
Entering User Data from a Web Page
25
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
26
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
27
Create a checkbox: Create a radio button: Radio buttons can be grouped, allowing only one to be selected from a group: 27
28
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>
29
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
30
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
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
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 E-mail: E-mail: <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
Gender: Gender: <input name="gender" type="radio" value="Male" <input name="gender" type="radio" value="Male" checked="true" /> Male checked="true" /> Male Female Female E-mail: E-mail: <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
34
, and, and
35
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
36
Embedded frames provide a way to show one Web site inside another Web site: 36 <html> IFrame Example IFrame Example </html> iframe-demo.html
37
Questions? http://academy.telerik.com
Similar presentations
