1. TABLES AND FORMS
322432 WEB DESIGN TECHNOLOGY
By Yaowaluck Promdee, Sumonta Kasemvilas
1
WDS
CS KKU
Web Design Technology | 2015
2. TABLE
2
o Tables are defined with the <table> tag.
o Tables are divided into table rows with the <tr> tag.
o Table rows are divided into table data with
the <td> tag.
o A table row can also be divided into table
headings with the <th> tag.
WDS
CS KKU
Web Design Technology | 2015
4. TABLE HTML & CSS
4
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
http://www.w3schools.com/html/html_tables.asp
Web Design Technology | 2015
5. TABLE HTML & CSS
5
o Use the HTML <table> element to define a table
o Use the HTML <tr> element to define a table row
o Use the HTML <td> element to define a table data
o Use the HTML <th> element to define a table heading
o Use the HTML <caption> element to define a table caption
o Use the CSS border property to define a border
o Use the CSS border-collapse property to collapse cell borders
o Use the CSS padding property to add padding to cells
o Use the CSS text-align property to align cell text
o Use the CSS border-spacing property to set the spacing between cells
o Use the colspan attribute to make a cell span many columns
o Use the rowspan attribute to make a cell span many rows
o Use the id attribute to uniquely define one table
WDS
CS KKU
Web Design Technology | 2015
8. 8
Exercise.1 Try it! In Class
This table is the result. How to code HTML and CSS ?
Conditions:
1. Heading is bold font. Text all of content show center and grey color. Border
bottom is 2 px and black color.
2. Row1 and Row3 is light grey color.
3. Row2 is white color.
4. When mouse over will show dark color on the table.
WDS
CS KKU
Web Design Technology | 2015
15. HTML FORMS
15
Radio Buttons
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
WDS
CS KKU
Web Design Technology | 2015
16. HTML FORMS
16
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
WDS
CS KKU
Web Design Technology | 2015
17. HTML FORM TAGS
17
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
WDS
CS KKU
Web Design Technology | 2015
18. Web Design Technology | 2015
18
WDS
CS KKU
THE METHOD ATTRIBUTE
The method attribute specifies the HTTP method (GET or POST)
to be used when submitting the forms:
<form action="action_page.php" method="get">
<form action="action_page.php" method="post">
When to Use GET or POST?
Or
22. Web Design Technology | 2015
22
JavaScript Forms
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("Name must be filled out");
return false;
}
}
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
HTML
JavaScript Example
WDS
CS KKU
24. Exercise2 Try it in class!
24
WDS
CS KKU
Web Design Technology | 2015
Employment Application
For (*) show required “Please fill out this field.”
25. ASSIGNMENT #11
25
Create a Web page to follow Exercise1 and
Exercise2 using CSS design
Grade will be based on your CSS technique
and look and feel of the web page for
Exercise2
In hours time
WDS
CS KKU
Web Design Technology | 2015