Tables and forms with HTML, CSS

TABLES AND FORMS
322432 WEB DESIGN TECHNOLOGY
By Yaowaluck Promdee, Sumonta Kasemvilas
1
WDS
CS KKU
Web Design Technology | 2015

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

TABLE
3
WDS
CS KKU

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

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

TABLE AND CSS
6
Example1. CSS
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
WDS
CS KKU
Output

TABLE AND CSS (CONT.)
7
Example.1 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>
WDS
CS KKU

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

FORM
9
Form Elements
<form>
.
input elements
.
</form>
WDS
CS KKU

10
Example Form Design
WDS
CS KKU

FORM TEXT FIELDS
11
<form>
First name: <input type=“gender" name="firstname"><br>
Last name: <input type=“gender" name="lastname">
</form>
Password Field
<form>
Password: <input type="password"
name="pwd">
</form>
WDS
CS KKU

HTML5 TEXT FIELDS
12
<input type=“data” name=“birthday”>
<input type=“time” name=“game-time”>
<input type=“email” name=“email-address”>
<input type=“url” name=“website”>
<input type=“number” name=“cost”>
<input type=“tel” name=“phonenumber”>
<!- example shows the next page -->
color date datetime!
email month number!
range search tel!
time url week!
http://learn.shayhowe.com/html-css/building-forms/

13
WDS
CS KKU
Example text fields
date time email
url number tel

HTML5 TEXT FIELDS
14
<progress id=“prog” max=100 value=45> 45% </progress>
<input type=“range” min=“1” max=“5” step=“1” />
<input type="color "">
<input type=“file” name=“file” >
http://cdn.sixrevisions.com/demos/0345-new_html5_form_input_types/
new-html5-form-input-types.html
<input type="text" name="name" required />
<input type="text" name="email" required />

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

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

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

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

.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
19
WDS
CS KKU

20
.textarea2 {
scrollbar-arrow-color:#add8e6;
scrollbar-3dlight-color:#add8e6;
scrollbar-darkshadow-color:#add8e6;
color:#197bff;
border:1px solid #add8e6;
font-size:12px
}
.textarea1 {
scrollbar-arrow-color:#ffb090;
scrollbar-3dlight-color:#ffb090;
scrollbar-darkshadow-color:#ffb090;
color:#ff4a19;
border:1px solid #ffb090;
font-size:12px
}
WDS
CS KKUExample2

.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">
21
WDS
CS KKU

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

Design Form
23
WDS
CS KKU

Exercise2 Try it in class!
24
WDS
CS KKU
Employment Application
For (*) show required “Please fill out this field.”

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

Tables and forms with HTML, CSS

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Tables and forms with HTML, CSS (20)

More from Yaowaluck Promdee (17)

Recently uploaded (20)

Tables and forms with HTML, CSS