The document provides information about HTML tables, forms, and frames. It discusses the basic structure and tags used to create tables, as well as more advanced table features like header and footer sections, column and row spanning, and nested tables. It also covers the various form field types like text boxes, buttons, selects, and provides examples of how to use them. Finally, it provides a brief overview of frames, noting they are no longer widely used due to compatibility issues.

1. Doncho Minkov
and Frames

2. Contents
+ HTML Tables
Simple Tables
Complete HTML s Tables
Data cells and Header cells
+ Nested Tables
+ Complex tables
' Cells Width
Cell Spacing and Padding
Column and Row Span

3. Contents (z)
Buttons
Checkboxes and Radio Buttons
Hidden fields
Validation fields

4. Contents (3)
• HTML Frames
Frame and Noframe tags

6. HTML Tables
• 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:
‹tab1e›‹/tab1e›: begin / end the table
< t r › < / t r › : create a table row
‹ t d › ‹ / I d › : create tabular data (cell)
• Tables should not be used for layout. Use CSS
floats and positioning styles instead
6

7. ‹table ce1lspacing:“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>
href=“lecture2.ppt'›Lecture 2‹/a›‹/td›
‹td›‹a
‹/tr>
‹tr›
<td>‹img src='zip.gif”>‹ftd›
‹td›‹a href=“1ecture2-demos.zip”›
Lecture 2 - Demos‹/a›‹/td›
‹/tr›
‹/table›

8. 6 teIerik
Live Demo

9. +Two kinds of cells in HTML ç tables
Data cells —
containing the table data
Header cells —used for the column names or
some more important cells in a table
+ Why two kinds of cells?
Used to semantically separate the cells
‹/
<th›Full name</th› <th> Park ‹/th›
‹/tr›
‹td›Doncho Minkov‹/td› ‹td>Very good 5‹/td›
tr›
<td›Georgi Georgiev‹/td› ‹td>Exellent 6</td›

10. 6 teIerik
Data and Header Cells
Live Demo

11. 6 teIerik
and Body

12. 6 teIerik Complete HTML Tables
+Table rows split into three semantic sections:
header, body and footer
‹thead› denotes table header and contains
‹ t h › elements, instead of <td› elements
‹tbody› denotes collection of table rows that
contain the very data
‹I-Foot› denotes table footer but comes
BEFORE the ‹tbody› tag
‹co1group› and <col> define columns (used
to set column widths)

13. ‹col style=“width:100px“ />‹col />
header
‹tr><th>Co1umn 1</th›‹th>Column 2</th>‹/tr›
‹tr›‹td›Footer 1</td›‹td›Footer 2‹/td›‹/tr>
‹I r› ‹Id›Cell 1. 1‹/td› ‹Id›Cell 1.2‹/td›‹/t r›
‹tr›‹td›Cell 2.l‹/td›‹td›Cell 2.2‹/td›‹/tr›
‹/tbody›
</table>

14. the
before

15. 6 teIerik
Live Demo

17. Nested Tables
• Table "cells" (‹Id›) can contain nested tables
(tables within tables):
nested-tables.html

19. 6 teIerik
With Padding, Spacing and Stuff

20. 6 te ierik Cell Spacing and Padding
+Tables have two attributes related to space
•cellspacing •cellpadding
• Defines the • Defines the empty
empty space space around the cell
between cels content

21. 6 te ierik Cell Spacing and Padding —
table-cells.html
Example
fhtml›
<head›‹title›Table Cel1s</title›‹/head›
‹body›
cellpadding=“0'›
‹table cellspacing=“l5“
<tr>‹td>First</td>
‹td>Second‹/td></tr›
‹/table›
<br/>
‹table cellspacing="0' ce1lpadding="10"›
‹tr>‹td›First‹/td›‹td›Second‹/td›‹/tr›
</table›
‹/body>
‹/htm1›

22. 6 te ierik Cell Spacing and Padding —
table-cells.html
Example (z)

23. e e k
Live Demo

24. 6 teIerik
Row and Column
How to make a two-cells
column? Or row?

25. 6 teIerik Column and Row Span
+Cells have two attributes related to merging
• colspan • roøspan
many columns many rows the
the cell occupies cell occupies

26. Pte Ierik
table-colspan-rowspan.html
Column and Row Span —
Example
stable ceIlspacing=”0”›
‹tr class=”1”›‹td›Cell[1,1]‹/td›
‹td colspan=”2”>Cell[2,1]‹/{d›‹/tr>
‹tr class:”2”>‹{d›Cell[1,2a/td>
‹td rowspan-”2”›Cell[2,2]‹/td>
‹td>Cell[3,2]</td›‹/try
‹tr class:”3”›‹{d>Cel1[1,3]‹/td›
‹td>Cell[2,3]</td>‹/tr>
‹/table>
6

27. 6 teIerik Column and Row Span —
table-colspan-rowspan.html
Example (z)

28. 6 teIerik

29. Entering User Data from aWeb Page

30. 6 teIerik What are HTML s Forms?
+The primary method for gathering data from
site visitors
• HTML s Forms can contain
Text fields for the user to type
Buttons for interactions like "Register", "Login",
”Search“
Menus, Sliders, etc...
• Check Google, Yahoo, Facebook
Google search field is a simple Text field

31. • Create a form block with

32. 6 teIerik Text Fields
• Single-line text input fields:
<input type:'text“ name='FirstName“ value-“This
is a text field' /›
• Multi-line text input fields (textarea):
‹textarea name="Comments”>This is a multi-line
text field</textarea>
• Password input —a text field which masks the
entered text with * signs
cinpu Type-"passtood" name-"pass" f

33. 6 teIerik Buttons
• Reset button —
brings the form to its initial state
‹input type=”reset” name="resetBtn"
value=”Reset the form” /›
• Submit button:
‹input type="submit” value=”Apply Now“ />
• Image button —acts like submit but image is
displayed and click coordinates are sent
‹input type=”image” src=”submit.gif"
name=”submitBtn" alt=”Submit" /›
• Ordinary button —no default action, used with JS
<input type=“button" value=“click me“ /›

34. 6 telerik Checkboxes and Radio Buttons
• Checkboxes:
name-"fruit“
<input type=”checkbox“
value=“apple' /›
• Radio buttons:
‹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=“city' value= 'Lom" />
<input type=“radio' name=“city" value="Ruse“ /›

35. 6 teIerik Select Fields
+ Dropdown menus:
<select name="gender”>
<option value=“Value 1“
selected=“selected"›Male‹/option›
‹option value=“Value 2“›Female‹/options
‹option
‹/select›
value="Value 3"›Other‹/options
+ Multiple-choice menus
<select name=”products" multiple="multiple“
<option va1ue=”Value 1”
se1ected=”selected”>keyboard</options
<option va1ue=”Value 2”>mouse<foption>
</selects
35

36. Hidden Fields
• Hidden fields contain invisible data
<input type="hidden“ name-“Account“
is a hidden text field“ />
value-“This
Not shown to the user
Used by JavaScript and server-side code
ViewState, SessionState,etc:
g6

37. 6 teIerik Labels
• Labels are used to associate an explanatory text
to a form field using the field's ID.
<label for=”fn”›First Name</label›
<input type=”text" îd=”fn" />
• Clicking on a label focuses its associated field
(checkboxes are toggled, radio buttons are
checked)
• Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation.

38. 6 teIerik Fieldsets
• Fieldsets are used to enclose a group of related
form fields:
<form method=“post“ action=' form.aspx '>
<fieldset>
<legend›C1ient Details</legends
<input
<input
type=“text" id='Name ' />
type=“text“ id=”Phone“ />
</fieldset›
<fieldset>
‹legend>0rder Details‹/legend›
<input type=“text" id-"Quantity ' />
<textarea cols=“40" rows=' 10“
id= 'Remarks '›</textarea>
‹/fieldset>
</form>
• The <Iegend> is the fieldset's title.

39. 6 teIerik
Live Demo

40. 6 teIerik
Lets make it spin

41. 6 teIerik Range and Spinbox
• Restricts users to enter only numbers
Additional attributes min, max and step and
value
Can become Spinbox or Slider, depending on
the input type
<input
<input
type=”range"
type=”number"
min="0”
min=”0”
max=”100” />
max=”100” />
Have some differences on different browsers
Sliders and Spinboxes do not work on Firefox
Shown as regular textboxes

42. 6 te Ierik
Live Demo

43. 6 teIerik Attributes from HTML s
• Autocomplete
The browser stores the previously typed values
Brings them back on a later visit on the same
page
• Autofocus
The field becomes on focus on page load
• Required
The field is required to be filled/selected

44. 6 telerik Input Fields with Validation
+Email —
provides a simple validation for email
Can be passed a pattern for validation
On a mobile device brings the email keyboard
‹input type="emaîl" required="true"
pattern=”[’ @]*@[’ @].}’ @j“/>
• URL —
has validation for url
On a mobile device brings the url keyboard
‹input type=“url" required="true" /›
+Telephone
Brings the numbers keyboard
inpu pe= tel required= ue /

45. 6 teIerik
Live Demo

46. 6 teIerik Tablndex
+The tabindex HTML attribute controls the
order in which form fields and hyperlinks are
focused when repeatedly pressing the TAB key
tabindex="o" (zero) - "natural" order
If X <Y, then elements with tabindex="X" are
iterated before elements with tabindex="Y"
Elements with negative tabindex are skipped,
however, this is not defined in the standard
input t pe ext abindex /›
6

47. 6 teIerik
Tab index
Live Demo

48. 6 teIerik
HTML Frames
<frameset›, <frame›and <iframe>

49. 6 teIerik HTML Frames
+Frames provide a way to show multiple HTML
documents in a single Web page
• The page can be split into separate views
(frames) horizontally and vertically
• Frames were popular in the early ages of HTML
development, but now their usage is rejected
• Frames are not supported by all user agents
(browsers, search engines, etc.)
A <noframes> element is used to provide
content for non-compatible agents.

50. HTML Frames Demo
‹head›‹title›Frames Examples/title›</head>
‹frameset cols=”180px,*,150px”›
‹frame src=”left.html“ /›
‹frame src-”middle.html” />
‹frame src="right.html" /›
‹/f-rame set ›
</html›
+ Note the target attribute applied to the
‹a› elements in the left frame.
5

51. 6 teIerik Inline Frames: <iframe›
+Inline frames provide a way to show one
website inside another website:
iframe-demo.html
‹iframe name="iframeGoogle“
src=”http://www.google.com“
scrollìng=”yes”›‹/iframe›
width=”600" height="400”
frameborder=”yes“
5

53. Create a Web Page
like the following
using forms:
• Create Web Pages like the following using
tables:
Member name :
Email :
SChooÎ :
C I
Title does here A B
D E F G
H
K L RI I
N O
*req
*req
*req

55. t. Create a Calculator-like table.
You should use a HTML s
form for the Calculator
Buttons for all the numbers
and operators (+, -, etc.)
Textbox for the result
Do not make the same styles
as the example.
123
1 2 3 +
4 5 6 -
7 8 9 *

57. Drag a column deader and drDQ it he-e to group by that coTiumn
firoductlD Product name Unit price Units n stock Discontinued
Char OO 10 boxes x20 bags
Chang OO 24 - 12 oz bottles
Aniseed Syrup 510.00
Chef Anton's Cajun Seasoning OO
]2O
S3Q00
Northwoods C ranberry Sauce
Misht lobe Niku
V0.00
00
10 00 I7 - 200 ml ars

58. A b l e Toshiba Lenovo Dell Asus Hacer HP
AppleMacBook Air AppleMacBookAir
Min price: soo USD
M X price: •5OO
US
D
Min RAM: 4 GB
Max RAM: z6 GB
64 BSSD 6 GB SSD
KGB DDR aG8 DDR
3 OU5D Intel Core 's 3OoU5D Intel Core iç
Apple MacBook Air Apple MacBook Air
6 GB SSD 6 GBSSD
zGBDDR 2GBDDR
*3^OUSD IntelCore s •3•OUSD IntelCore 's
AppleMacBookAir AppleMacBook Air
ü4GB SSD 6,GBSS
KGBDDR aGBDDR
300USD IntelCore '5 3 0USD IntelCore ‹s