LAB#11 Tables and Forms

322432 Web Design Technology

1

Table

การสรางตารางใน เว็บเพจมีประโยชนมากมาย โดยที่สามารถประยุกตนำไปใชไดหลายอยาง เพื่อเปนการเพิ่มสีสันความสวยงามของเว็บเพจ การสรางตาราง ยังเปน

ชวยในการออกรายงานตางๆ จัดรูปแบบขอความ ในกรณีออกเปนรายงาน ผลตางๆ การนำเสนอดวยตารางก็เปนที่นิยม 

2

Table โครงสรางตาราง <TABLE> //เปนคำสั่งเปดปดตาราง 

<TR> //ตารางตามแนวนอน เปนการกำหนดแถวในตาราง <TR> 

<TH>หัวขอตาราง //หัวขอของตารางขอความที่อยูในคำสั่งจะถูกจัดใหเปน ตัวหนา

และกึ่งกลาง โดย อัตโนมัติ <TD>รายละเอียดยอย //เปนรายละเอียด ของตาราง เปนการ กำหนดจำนวน คอลัมน

ของตาราง <TH>หัวขอตาราง 

<TD>รายละเอียดยอย 

</TABLE> 3

คุณสมบัติตาราง  

ALIGN ! !กำหนด ตำแหนงตาราง โดย ! ! !LEFT=กำหนดตารางใหอยูทางซาย ! ! !RIGHT=กำหนดตารางใหอยูทางขวา 

BACKGROUND !ใสภาพกรฟก เปนพื้นหลังตาราง url เปน ตำแหนง ภาพ BGCOLOR !กำหนดสีใหตาราง BORDER ! !เสนขอบ ตาราง n เปนคา ความหนาของ ขอบตาราง BORDERCOLOR !กำหนดสี ใหขอบตาราง โดยสัมพันธกับ BORDER CELLPADDING !กำหนดระยะ หางระหวาง ตัวหนังสือและเสนแบงตาราง CELLSPACING !กำหนดขนาดของเสนตาราง WIDTH ! !กำหนดความกวางของตาราง เปนตัวเลขและเปน % HEIGHT ! !กำหนดความสูงของตารางเปนตัวเลขและเปน % 

4

คุณสมบัติตาราง Table ตองใชกับเว็บเบราเซอรรุนใหมๆ เชน IE6 เปนตนไป *บาง property เมื่อทดสอบแลวไมเห็นผล 

Property !  Description  Values  

table-layout  ใชกำหนดความกวางของตารางและคอลัมน 

automatic fixed 

Default กวางตามที่กำหนดเทานั้น 

caption-side  ใชกำหนดตำแหนงของชื่อตาราง  top, bottom, left, right  

Default  

empty-cells  ใชกำหนดวาจะแสดง/ไมแสดงเสนขอบ เมื่อ cell นั้นไมมีขอความ  

hide show 

border-spacing  ใชกำหนดระยะระหวางตารางและขอบ แนวนอน และแนวตั้ง 

length 

border-collapse  

ใชกำหนดลักษณะเสนขอบ   separate collapse 

5

Table and CSS

Ex. CSS  table.one 

{ table-layout: automatic 

} 

table.two { 

table-layout: fixed } 

6

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

Form

Form Elements

<form> . input elements . </form>

8

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>

9

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>

10

HTML Forms

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

11

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

.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>

Example

13

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 }

14

.button_gray { font-family:Arial, Helvetica, sans-serif; font-weight:bold; color:#333333; background-color:#F7F7F7; border: 1px solid #000000; padding: 1px 0; }

Example

<input type="button" value="Submit" class="button_gray">

15

ตัวอยาง Design Form 

16

pseudo-classes

v :active ในที่นี้ จะทำงานในขณะที่ click mouse  v :focus จะทำหนาที่บอกตำแหนงของตัวรับขอมูลของแบบฟอรมที่ cursor ของ

ผูใชงานทำงานอยู และ สถานะที่พรอมใชงาน (พรอมรับขอมูลที่จะกรอก) v :checked เปน pseudo-classes ที่ทำการเช็คคาความเปนจริงของ

input[type='checkbox'], input[type='radio'] วาไดทำการเลือกไปแลว 

17

pseudo-classes

18

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; }

Example

19

คำสั่ง LAB#11 

ใหนักศึกษาออกแบบฟอรม และตารางการเก็บขอมูลที่จัดเตรียมไวให โดยสวยงาม และใหเขียนคอมเมนโคด อธิบายเปนสวนๆ ดวย  

20