SlideShare a Scribd company logo
1 of 25
Download to read offline
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
Web Design Technology | 2015
TABLE
3
WDS
CS KKU
Web Design Technology | 2015
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
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
TABLE AND CSS
6
Example1. CSS
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
WDS
CS KKU
Output
Web Design Technology | 2015
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
Web Design Technology | 2015
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
FORM
9
Form Elements
<form>
.
input elements
.
</form>
WDS
CS KKU
Web Design Technology | 2015
10
Example Form Design
WDS
CS KKU
Web Design Technology | 2015
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
Web Design Technology | 2015
HTML5 TEXT FIELDS
Web Design Technology | 2015
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/
Web Design Technology | 2015
13
WDS
CS KKU
Example text fields
date time email
url number tel
HTML5 TEXT FIELDS
Web Design Technology | 2015
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
Web Design Technology | 2015
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
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
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
.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
Web Design Technology | 2015
20
.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
}
WDS
CS KKUExample2
Web Design Technology | 2015
.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
Web Design Technology | 2015
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
Design Form
23
WDS
CS KKU
Web Design Technology | 2015
Exercise2 Try it in class!
24
WDS
CS KKU
Web Design Technology | 2015
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
Web Design Technology | 2015

More Related Content

What's hot

Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3Doris Chen
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid LayoutRachel Andrew
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSSandhika Galih
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers10Clouds
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout Rachel Andrew
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignZoe Gillenwater
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by CreatelyCreately
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 

What's hot (20)

Design sitemap
Design sitemapDesign sitemap
Design sitemap
 
Good/Bad Web Design
Good/Bad Web DesignGood/Bad Web Design
Good/Bad Web Design
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Flexbox and Grid Layout
Flexbox and Grid LayoutFlexbox and Grid Layout
Flexbox and Grid Layout
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
CSS
CSSCSS
CSS
 
CSS For Backend Developers
CSS For Backend DevelopersCSS For Backend Developers
CSS For Backend Developers
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
HTML CSS & Javascript
HTML CSS & JavascriptHTML CSS & Javascript
HTML CSS & Javascript
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Css Basics
Css BasicsCss Basics
Css Basics
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
BEM - CSS, Seriously
BEM - CSS, SeriouslyBEM - CSS, Seriously
BEM - CSS, Seriously
 
Sitemap Templates by Creately
Sitemap Templates by CreatelySitemap Templates by Creately
Sitemap Templates by Creately
 
CSS
CSSCSS
CSS
 
Introducing CSS Grid
Introducing CSS GridIntroducing CSS Grid
Introducing CSS Grid
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 

Viewers also liked

Viewers also liked (8)

Game design
Game designGame design
Game design
 
Web Interface
Web InterfaceWeb Interface
Web Interface
 
Style and Selector Part2
Style and Selector Part2Style and Selector Part2
Style and Selector Part2
 
HTML 5
HTML 5HTML 5
HTML 5
 
Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations Overview HTML, HTML5 and Validations
Overview HTML, HTML5 and Validations
 
Bootstrap Framework
Bootstrap Framework Bootstrap Framework
Bootstrap Framework
 
Observation and interviewing
Observation and interviewingObservation and interviewing
Observation and interviewing
 
Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)Html 5-tables-forms-frames (1)
Html 5-tables-forms-frames (1)
 

Similar to Tables and forms with HTML, CSS

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

Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Lect# 1 html part ii
Lect# 1 html part iiLect# 1 html part ii
Lect# 1 html part ii
 
Html and css
Html and cssHtml and css
Html and css
 
14_ HTML Con't.ppt
14_ HTML Con't.ppt14_ HTML Con't.ppt
14_ HTML Con't.ppt
 
Razor into the Razor'verse
Razor into the Razor'verseRazor into the Razor'verse
Razor into the Razor'verse
 
Html5 101
Html5 101Html5 101
Html5 101
 
Vaadin Components @ Angular U
Vaadin Components @ Angular UVaadin Components @ Angular U
Vaadin Components @ Angular U
 
Lectuer html2
Lectuer  html2Lectuer  html2
Lectuer html2
 
Tags
TagsTags
Tags
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
CSS3 Introduction
CSS3 IntroductionCSS3 Introduction
CSS3 Introduction
 
HTML Tutorials
HTML TutorialsHTML Tutorials
HTML Tutorials
 
Html5 intro
Html5 introHtml5 intro
Html5 intro
 
CSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML SemanticsCSUN 2020: CSS Display Properties Versus HTML Semantics
CSUN 2020: CSS Display Properties Versus HTML Semantics
 
HTML.pptx
HTML.pptxHTML.pptx
HTML.pptx
 
Difference between Table templates
Difference between Table templates Difference between Table templates
Difference between Table templates
 
HTML CSS and Web Development
HTML CSS and Web DevelopmentHTML CSS and Web Development
HTML CSS and Web Development
 
Lecture05sql 110406195130-phpapp02
Lecture05sql 110406195130-phpapp02Lecture05sql 110406195130-phpapp02
Lecture05sql 110406195130-phpapp02
 

More from Yaowaluck Promdee (17)

A basic of UX for beginner
A basic of UX for beginnerA basic of UX for beginner
A basic of UX for beginner
 
TCAS 2563
TCAS 2563TCAS 2563
TCAS 2563
 
Portfolio design
Portfolio designPortfolio design
Portfolio design
 
Concept to creation story and storyboard
Concept to creation  story and storyboard Concept to creation  story and storyboard
Concept to creation story and storyboard
 
Requirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvasRequirement gathering-and-lean-canvas
Requirement gathering-and-lean-canvas
 
Good bad design
Good bad designGood bad design
Good bad design
 
Graphic, Color and tools
Graphic, Color and toolsGraphic, Color and tools
Graphic, Color and tools
 
Page layouts flexible and fixed layout with CSS
Page layouts flexible and fixed layout with CSSPage layouts flexible and fixed layout with CSS
Page layouts flexible and fixed layout with CSS
 
Powerpoint
Powerpoint Powerpoint
Powerpoint
 
Program Interface
Program Interface Program Interface
Program Interface
 
Mobile Interface
Mobile Interface   Mobile Interface
Mobile Interface
 
Personas and scenario
Personas and scenarioPersonas and scenario
Personas and scenario
 
Ux design process
Ux design processUx design process
Ux design process
 
Graphic Design
Graphic Design Graphic Design
Graphic Design
 
Lab#2 illustrator
Lab#2 illustratorLab#2 illustrator
Lab#2 illustrator
 
Good/Bad Design
Good/Bad DesignGood/Bad Design
Good/Bad Design
 
Content management system
Content management systemContent management system
Content management system
 

Recently uploaded

How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17Celine George
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17Celine George
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...CaraSkikne1
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxiammrhaywood
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxheathfieldcps1
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 

Recently uploaded (20)

How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17How to Use api.constrains ( ) in Odoo 17
How to Use api.constrains ( ) in Odoo 17
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17How to Add a New Field in Existing Kanban View in Odoo 17
How to Add a New Field in Existing Kanban View in Odoo 17
 
5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...5 charts on South Africa as a source country for international student recrui...
5 charts on South Africa as a source country for international student recrui...
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptxAUDIENCE THEORY -- FANDOM -- JENKINS.pptx
AUDIENCE THEORY -- FANDOM -- JENKINS.pptx
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
The basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptxThe basics of sentences session 10pptx.pptx
The basics of sentences session 10pptx.pptx
 
Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 

Tables and forms with HTML, CSS

  • 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
  • 3. TABLE 3 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
  • 6. TABLE AND CSS 6 Example1. CSS table.one { table-layout: automatic } table.two { table-layout: fixed } WDS CS KKU Output Web Design Technology | 2015
  • 7. 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 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
  • 10. 10 Example Form Design WDS CS KKU Web Design Technology | 2015
  • 11. 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 Web Design Technology | 2015
  • 12. HTML5 TEXT FIELDS Web Design Technology | 2015 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. Web Design Technology | 2015 13 WDS CS KKU Example text fields date time email url number tel
  • 14. HTML5 TEXT FIELDS Web Design Technology | 2015 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 />
  • 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
  • 19. .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 Web Design Technology | 2015
  • 20. 20 .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 } WDS CS KKUExample2 Web Design Technology | 2015
  • 21. .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 Web Design Technology | 2015
  • 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
  • 23. Design Form 23 WDS CS KKU Web Design Technology | 2015
  • 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