ตัวอย่าง การสร้างรูปแบบ ตารางรายงานข้อมูล ด้วย css อย่างง่าย
22 February 2011ตัวอย่าง การสร้างรูปแบบ ตารางรายงานข้อมูลต่อไปนี้ เป็นการใช้งาน css ทั้งแบบ
in-line และ Internal
ศึกษาการใช้งาน css ใน แบบ in-line และ Internal ได้ที่
http://www.ninenik.com/การใช้งาน_CSS__ศึกษาวิธีการนำ_CSS_ไปใช้กับ_HTML-59.html
ดูไฟล์ตัวอย่างได้ที่
http://www.ninenik.com/demo/css_report_table.php
ตัวอย่างโค้ดไฟล์ตัวอย่าง
<!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" />
<title>css report table</title>
<style type="text/css">
* {
margin:0;
padding:0;
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
}
html {
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
color:#000000;
}
body {
font-family:Arial, "times New Roman", tahoma;
font-size:12px;
padding:0;
margin:0;
color:#000000;
}
.headTitle {
font-size:12px;
font-weight:bold;
text-transform:uppercase;
}
.headerTitle01 {
border:1px solid #333333;
border-left:2px solid #000;
border-bottom-width:2px;
border-top-width:2px;
font-size:11px;
}
.headerTitle01_r {
border:1px solid #333333;
border-left:2px solid #000;
border-right:2px solid #000;
border-bottom-width:2px;
border-top-width:2px;
font-size:11px;
}
/* สำหรับช่องกรอกข้อมูล */
.box_data1 {
font-family:Arial, "times New Roman", tahoma;
height:18px;
border:0px dotted #333333;
border-bottom-width:1px;
}
/* กำหนดเส้นบรรทัดซ้าย และด้านล่าง */
.left_bottom {
border-left:2px solid #000;
border-bottom:1px solid #000;
}
/* กำหนดเส้นบรรทัดซ้าย ขวา และด้านล่าง */
.left_right_bottom {
border-left:2px solid #000;
border-bottom:1px solid #000;
border-right:2px solid #000;
}
/* สร้างช่องสี่เหลี่ยมสำหรับเช็คเลือก */
.chk_box {
display:block;
width:10px;
height:10px;
overflow:hidden;
border:1px solid #000;
}
</style>
</head>
<body>
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="left"> </td>
</tr>
<tr>
<td align="center" class="headTitle" style="font-size:15px;">ใบรับฝากรวม<br />
RECEIPT FOR BULK POSTING <br /></td>
</tr>
<tr>
<td align="left"><table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">ไปรษณียภัณฑ์</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">ลงทะเบียน</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">รับรอง</td>
</tr>
<tr>
<td>ได้รับฝาก</td>
<td align="center"> </td>
<td align="left">Letter-Post items</td>
<td align="center"> </td>
<td align="left">Registered</td>
<td> </td>
<td align="left">Certified</td>
</tr>
<tr>
<td>Received</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">พัสดุไปรษณีย์</td>
<td align="center"><div class="chk_box"></div></td>
<td align="left">รับประกัน</td>
<td> </td>
<td align="left"> </td>
</tr>
<tr>
<td> </td>
<td align="center"> </td>
<td align="left">Parcels</td>
<td align="center"> </td>
<td align="left">Insured</td>
<td> </td>
<td align="left"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
<td width="200" align="center"> ไว้ดังนี้ ตราประจำวัน</td>
</tr>
<tr>
<td>จาก
<input name="textfield" type="text" class="box_data1" id="textfield" style="text-align:left;width:500px;" /></td>
<td align="center">As Follows Date Stamp</td>
</tr>
</table></td>
</tr>
<tr>
<td align="left">From</td>
</tr>
<tr>
<td align="left"><table width="750" border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-top:5px double #000;">
<tr>
<td width="50" rowspan="2" class="headerTitle01" align="center" valign="middle">ลำดับ<br />
No.</td>
<td width="200" rowspan="2" class="headerTitle01" align="center" valign="middle">นามผู้รับ<br />
Name Of Addressee</td>
<td width="130" rowspan="2" class="headerTitle01" align="center" valign="middle">ปลายทาง<br />
Destination</td>
<td width="70" rowspan="2" class="headerTitle01" align="center" valign="middle">เลขที่<br />
Number</td>
<td width="100" rowspan="2" class="headerTitle01" align="center" valign="middle">น้ำหนัก (กรัม)<br />
Weight (Grammes)</td>
<td colspan="2" class="headerTitle01" align="center" valign="bottom">ค่าบริการ<br />
Postal Charge</td>
<td width="100" rowspan="2" class="headerTitle01_r" align="center" valign="middle">หมายเหตุ<br />
Remarks</td>
</tr>
<tr>
<td width="70" align="center" valign="bottom" class="headerTitle01">บาท<br />
Baht</td>
<td width="30" class="headerTitle01" align="center" valign="bottom">สต.
Stg.</td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">1</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">2</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">3</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">4</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">5</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">6</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">7</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">8</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">9</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">10</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">11</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">12</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">13</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">14</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">15</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">16</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">17</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">18</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">19</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">20</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">21</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">22</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">23</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">24</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="center" class="left_bottom">25</td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td height="20" align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_bottom"> </td>
<td align="left" class="left_right_bottom"> </td>
</tr>
<tr>
<td colspan="4" align="left" style="border-top:2px solid #000;">รวมทั้งสิ้น
Total
<input name="textfield2" type="text" class="box_data1" id="textfield2" style="text-align:center;width:250px;" />
ฉบับ/ห่อ
Pieces</td>
<td align="center" style="border-top:2px solid #000;">เป็นเงิน
Amount</td>
<td height="20" align="left" class="left_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;"> </td>
<td align="left" class="left_right_bottom" style="border-bottom:5px double #000;border-top:2px solid #000;"> </td>
<td align="left" style="border-top:2px solid #000;"> </td>
</tr>
</table></td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
<td align="left"> </td>
</tr>
<tr>
<td align="left"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" align="left">- ใบรับฝากนี้ใช้เป็นหลักฐานการฝากส่ง โปรดเก็บรักษาไว้จนหมดอายุ<br />
การสอบสวน คือ ระยะเวลา 6 เดือน นับจากวันต่อจากวันที่ฝากส่ง<br /></td>
<td width="50%" align="left"> </td>
</tr>
<tr>
<td align="left">- การติดต่อในเรื่องใดเกี่ยวกับการฝากส่ง ต้องนำใบฝากฉบับนี้<br />
มาแสดงทุกครั้ง มิฉะนั้น ปณท อาจไม่ทำการตรวจสอบหรือสอบสวนให้</td>
<td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100" align="right">พนักงานรับฝาก</td>
<td width="62%"><input name="textfield10" type="text" class="box_data1" id="textfield10" style="text-align:center;width:200px;" /></td>
</tr>
<tr>
<td align="right">Counter Clerk</td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
ตัวอย่างการใช้ css แบบ inline บรรทัดที่ 132
style="border-collapse:collapse;border-top:5px double #000;"
เป็นการกำหนดให้ขอบด้านบนของตาราง แสดงขีด 2 เส้น
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
09 Dec 09 การรวมไฟล์ javascript หรือไฟล์ css เป็นไฟล์เดียว ด้วย php อย่างง่าย อ่าน 1852 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 1912 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1648 19 Oct 08 คำสั่ง SQL COUNT อ่าน 6716 16 Oct 08 CSS กับการตกแต่งกรอบรูปภาพ อ่าน 10702 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2320 24 Feb 11 ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่าย อ่าน 1797 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4610 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 5847 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4120 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2254 05 Nov 09 เช็ค บราวเซอร์ Browser ด้วย php อย่างง่าย อ่าน 2309 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 2917 13 Oct 11 แนะนำการใช้งาน การเชื่อมต่อ facebook ด้วย php sdk v.3.1.1 อ่าน 886 19 Aug 09 สร้าง เมนูแท็บ Tabs อย่างง่าย ด้วย jQuery UI อ่าน 10648 01 Dec 10 การใช้งาน polyline และ polygon ใน google map api v3 อ่าน 3766 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 4713 04 Mar 09 ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย อ่าน 6980 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2778