ต้องใช้กับเว็บเบราเซอร์รุ่นใหม่ๆ เช่น 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 เส้น เป็นเส้นเดียว |
ตัวอย่าง
<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>
ผผลลัพธ์ <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>
| 1000000000000000000000000000 | 10000000 |
| 1000000000000000000000000000 | 10000000 |
ตัวอย่าง
ลองจัดรูปแบบอื่นๆ ให้กับตาราง โดยใช้ 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>
ผลลัพธ์<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>
| รหัสพนักงาน | ชื่อ | เงินเดือน |
|---|---|---|
| 01 | อำนาจ | 30,000 |
| 02 | สมชาย | 25,000 |
| 03 | วีระ | 20,000 |
