Munu
Table
ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น IE6 เป็นต้นไป
*บาง property เมื่อทดสอบแล้วไม่เห็นผล
Property Description Values
table-layout ใช้กำหนดความกว้างของตารางและคอลัมน์ automatic
fixed Default
กว้างตามที่ำกำหนดเท่านั้น
caption-side ใช้กำหนดตำแหน่งของชื่อตาราง top
bottom
left
right Default
empty-cells ใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty) hide
show Default
border-spacing
ใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้ง length length เช่น 2px 5px
border-collapse
ใช้กำหนดลักษณะเส้นขอบ separate
collapse Default แยกเป็น 2 เส้น
เป็นเส้นเดียว
Example
<html>
<head>
<style type=”text/css”>
table.one{
table-layout:automatic;
width:100%;
border:1px solid #666666
}
table.two{
table-layout:fixed;
empty-cells:show;
border-collapse:collapse;
width:100%;
border:1px solid #666666
}
td {
border:1px solid #666666
}
</style>
</head>
<body>
<table class=”one”>
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width=”20%”>1000000000000000000000000000</td>
<td width=”40%”>10000000</td>
<td width=”40%”></td>
</tr>
</table>
<br />
<table class=”two”>
<caption>ตารางแสดงตัวเลข</caption>
<tr>
<td width=”20%”>1000000000000000000000000000</td>
<td width=”40%”>10000000</td>
<td width=”40%”></td>
</tr>
</table>
</body>
</html>
Output
ตารางแสดงตัวเลข
1000000000000000000000000000 10000000
ตารางแสดงตัวเลข
1000000000000000000000000000 10000000
สังเกต ตารางที่สอง จะ fix ความกว้างของช่องตารางไว้ ทำให้แสดงข้อความไม่พอ นอกจากนี้มีการกำหนด cell ว่างให้แสดงด้วย และให้แสดงเส้นขอบรวมเป็นเส้นเดียว
Exampleลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ CSS บทที่ผ่านๆ มา ดูค่ะ
<html>
<head>
<style type=”text/css”>
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;
}
</style>
</head>
<body>
<table class=”three” cellspacing=”0″>
<tr>
<th>รหัสพนักงาน</th>
<th>ชื่อ</td>
<th>เงินเดือน</th>
</tr>
<tr>
<td>01</td>
<td>อำนาจ</td>
<td align=”right”>30,000</td>
</tr>
<tr>
<td>02</td>
<td>สมชาย</td>
<td align=”right”>25,000</td>
</tr>
<tr>
<td>03</td>
<td>วีระ</td>
<td align=”right”>20,000</td>
</tr>
</table>
</body>
</html>
Output
รหัสพนักงาน ชื่อ เงินเดือน
01 อำนาจ 30,000
02 สมชาย 25,000
03 วีระ 20,000
