Table and Form HTML&CSS

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