CSS เบื้องต้น (การใช้ Css เพื่อให้ Table ดูดีขึ้น)
CSS เบื้องต้น (การใช้ Css เพื่อให้ Table ดูดีขึ้น)
กลับมาอีกแล้วกับ โปรแกรมเมอร์กากกาก บอกได้ว่ากากจริงไรจริง ฮ่าๆ นอกเรื่องไปแหละ เอาและครับ เราลองมาดูการสร้างตราราง HTML ให้น่าสนใจด้วย CSS กันดีกว่าครับ เราลองมาดูวิธีกันเลยดีกว่านะครับ
Code HTML ในส่วนของการสร้างตาราง
1. สร้างไฟล์ PHP หรือ HTML ก็ได้ แล้วพิมพ์ CODE (หรือ Copy ไปก็ได้นะจ่ะ) ดังนั้ง (ในที่นี้ โปรแกรมเมอร์กากกาก ใช้โปรแกรม dreamweaver ในการสร้างไฟล์ นะครับ)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel = "stylesheet" href ="css/primay.css"> //ส่วนของการเรียกใช้ (กรุณาระบุที่อยู่ของไฟล์ css ให้ถูกต้อง)
<title>TEST CSS TABLE</title>
</head>
<body>
<table class="three" cellspacing="0">
<thead >
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tbody >
<tr class="ood">
<td>Alex</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html>
Code Css ในส่วนของการตกแต่งตาราง
3. สร้างไฟล์ CSS ขึ้นมาใหม่อีก 1 ไฟล์ แล้ว พิมพ์ หรือ Copy CODE ตามนี้ครับ (สามารถลองแก้ไขได้ตามต้องการเลยนะครับ)
@charset "utf-8";
/* CSS Document */
table.three{
width:60%;
border:0;
}
table.three th { font-weight:bold;
border-bottom:1px solid #CCC;
border-top:1px solid #CCC;
background-color:#F2F9FF ;
color:#0000CC;
}
table.three td { padding:5px;
border-bottom:1px dotted #CCC;
}
ผลการรัน
อธิบาย CODE เล็กน้อย
ในส่วนของข้อ 1 กับข้อ 2 เป็นการสร้าง CODE HTML ธรรมดาๆ ซึ่งจุดสังเกตมีอยู่ที่ ตัวหนังสือสี่แดง ที่ทำไว้ให้คือ <link rel = "stylesheet" href ="css/primay.css"> มันเป็นการเรียกใช้ไฟล์ CSS ที่เราเขียนขึ้นไว้อีกไฟล์นั้นเอง ซึ่งในที่นี้ เราสามารถที่จะเขียนอยู่ในไฟล์เดียวกันก็ได้ (ไว้จะกล่าวในบทความต่อไป) แต่การแก้ไข CODE ต่างๆจะทำให้สับสนและไม่เป็นที่นิยม จึงนิยมเขียนแบบแยกไฟล์ จะสะดวกและง่ายต่อการแก้ไข
ในส่วนของ ข้อ 3 เป็นการเขียน CODE CSS อย่างง่ายโดยมีการกำหนดความ กว้างยาวของ ตาราง และอื่นๆ(ดังจะกล่าวในบทความต่อไป อิอิ) สุดท้ายนี้ โปรแกรมเมอร์กากกาก หวังเป็นอย่างยิ่งว่าบทความดังกล่าวจะเป็นประโยชน์ต่อท่านที่สนใจไม่มากก็น้อย หามีข้อผิดพลาดประการใดก็ขออภัยไว้ ณ ที่นี้ด้วย (เอิ่ม..ตอนท้ายนี้เขียนรายงานส่งอาจารย์หรือป่าวว่ะ 555+ ไปและครับไว้เจอกันในบทความหน้า)
Categories
:
เขียนโปรแกรม
,
CSS
,
CSS เบื้องต้น (การใช้ Css เพื่อให้ Table ดูดีขึ้น)
,
CSS พื้นฐาน
,
HTML
clerracpelo Nolan Osborne Download
ตอบลบliakanidu