1
LAB#11 Tables and Forms322432 Web Design Technology
By Yaowaluck Promdee, Sumonta Kasemvilas
2
Table
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
4
Table HTML & CSSTag 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 & CSSo Use the HTML <table> element to define a tableo Use the HTML <tr> element to define a table rowo Use the HTML <td> element to define a table datao Use the HTML <th> element to define a table headingo Use the HTML <caption> element to define a table captiono Use the CSS border property to define a bordero Use the CSS border-collapse property to collapse cell borderso Use the CSS padding property to add padding to cellso Use the CSS text-align property to align cell texto Use the CSS border-spacing property to set the spacing between
cellso Use the colspan attribute to make a cell span many columnso Use the rowspan attribute to make a cell span many rowso Use the id attribute to uniquely define one table
6
Table and CSS
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>
8
Form
Form Elements
<form>.input elements.</form>
9
Form Text Fields
<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
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
<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
13
.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}
<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:solid;border-color:#fff #98cee0 #98cee0 #fff;background:#add8e6;color:#000;text-align:center;font-size:12px;padding:4px”>Topic</div></div><textarea rows="5" class="textarea">Hello world...</textarea>
Example2
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}
.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
.button_gray {font-family:Arial, Helvetica,
sans-serif;font-weight:bold;color:#333333;background-color:#F7F7F7;border: 1px solid #000000;padding: 1px 0;
}
Example3
<input type="button" value="Submit" class="button_gray">
16
Design Form
17
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; }
Example4
18
Assignment #11
Create a Web page to present “Application for Employment” from information provided using CSS design
Grade will be based on your CSS techniqueand look and feel of the web page
In hours time