This document discusses HTML tables and forms. It provides information on how to structure tables using <table>, <tr>, <td>, and <th> tags. It also discusses using CSS to style tables, including properties like border, padding, text-align. The document then covers different form elements like text fields, radio buttons, checkboxes. It lists common form tags and their uses. Examples are given of using CSS to style textareas, buttons, and checked/focused form elements. The document concludes with an assignment to design an employment application form using CSS.

1. LAB#11 Tables and Forms
322432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
1

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.

3. Table
3

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

5. Table HTML & CSS
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
5

6. Table and CSS
6
Ex1. CSS
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}

7. Table and CSS (Cont.)
HTML CODE
<table class="one" border="1" width="100%”><tr>
<td width="20%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td> </tr> </table> <br />
<table class="two" border="1" width="100%”> <tr>
<td width="20%">1000000000</td>
<td width="40%">100000</td>
<td width="40%">100</td></tr>
</table>
7

8. Form
8
Form Elements
<form>
.
input elements
.
</form>

9. Form Text Fields
9
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Password Field
<form>
Password: <input type="password"
name="pwd">
</form>

10. HTML Forms
10
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>

11. HTML Forms
11
<form name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

12. HTML Form Tags
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
12

13. <div style="border:1px solid
#000;background:#fff;padding:4px;
width:320px">
<div style="border:1px solid
#000;margin-bottom:4px">
<div style="border-width:1px;border-style:
.textarea {
width:300px;
scrollbar-arrow-color:#000;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#fff;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#fff;
color:#000;
border-width:0;
font-size:12px
}
solid;border-color:#fff #98cee0
#98cee0
#fff;background:#add8e6;color:#000;t
ext-align:center;font-size:
12px;padding:4px”>Topic</div>
</div>
<textarea rows="5" class="textarea">
Hello world.
.
.
</textarea>
Example2
13

14. Example
.textarea2 {
scrollbar-arrow-color:#add8e6;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#add8e6;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#add8e6;
color:#197bff;
border:1px solid #add8e6;
font-size:12px
}
14
.textarea1 {
scrollbar-arrow-color:#ffb090;
scrollbar-face-color:#fff;
scrollbar-highlight-color:#fff;
scrollbar-3dlight-color:#ffb090;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#fff;
scrollbar-darkshadow-color:#ffb090;
color:#ff4a19;
border:1px solid #ffb090;
font-size:12px
}

15. Example3
.button_gray {
font-family:Arial, Helvetica,
sans-serif;
font-weight:bold;
color:#333333;
background-color:#F7F7F7;
border: 1px solid #000000;
padding: 1px 0;
}
<input type="button" value="Submit" class="button_gray">
15

16. Design Form
16

17. Example4
input[type="checkbox"]:checked+label,
input[type="radio"]:checked+label
{ color: green;
border-bottom: 1px solid green;
}
input[type='text']:active, textarea:active {
background: green;
input[type='text']:focus, textarea:focus {
color: gray;
-moz-box-shadow: 0px 0px 5px green;
-webkit-box-shadow: 0px 0px 5px green;
}
input[type='text']:focus+p, textarea:focus+p {
visibility: visible;
}
17

18. Assignment #11
18
Create a Web page to present
“Application for Employment”
from information provided using CSS design
Grade will be based on your CSS technique
and look and feel of the web page
In hours time