HTML CSS TABLES FORMS

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