ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comความรู้ทั่วไปInternet Marketingบทนี้จะใช้ CSS ควบคุมการแสดงผลของตารางที่สร้างขึ้นมา
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: บทนี้จะใช้ CSS ควบคุมการแสดงผลของตารางที่สร้างขึ้นมา  (อ่าน 2357 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
AnuchaChaanu
Newbie
*

พลังน้ำใจ: 0
ออฟไลน์ ออฟไลน์

กระทู้: 4



ดูรายละเอียด
« เมื่อ: 03 เมษายน 2020, 14:57:46 »

บทนี้จะใช้ CSS ควบคุมการแสดงผลของตารางที่สร้างขึ้นมา
จัดรูปแบบของตารางด้วยคำสั่ง CSS
จัดรูปแบบของตารางด้วยคำสั่ง CSS
1. ควบคุมการแสดงผลของตาราง
ตัวอย่างจะเป็นการแสดงคำสั่ง layout ซึ่งใช้ในการกำหนดขนาดของตารางให้เปลี่ยนแปลงตามเนื้อหา หรือไม่เปลี่ยนแปลงตามเนื้อหา

<html>
<head>
<style type="text/css">
table.one
{
table-layout: automatic
}
table.two
{
table-layout: fixed
}
</style>
</head>
<body>

<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%">1000000000000000000000000000</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>

</body>
</html>
2. คำสั่งแสดงผลช่องว่างของตาราง
การเขียนตารางโดยใช้คำสั่ง table จะไม่แสดงผลช่องว่างที่ไม่มีค่า ซึ่งถ้าเราต้องการให้แสดงผลก็ต้องใส่ค่าว่าง ( ) แต่ในหัวข้อนี้จะกำหนดให้แสดงช่องว่างทุกช่อง โดยไม่ต้องใส่ค่าว่างอีกต่อไป

<html>
<head>
<style type="text/css">
table
{
border-collapse: separate;
empty-cells: show
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>Photoshop</td>
<td>Illustrator</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td></td>
</tr>
</table>

</body>
</html>
3. ควบคุมการแสดงเส้นของตาราง
ตัวอย่างจะเป็นคำสั่งที่ใช้ควบคุมการแสดงผลของเส้นตาราง คำสั่ง border-collapse: separate

<html>
<head>
<style type="text/css">
table.coll
{
border-collapse: collapse
}
table.sep
{
border-collapse: separate
}
</style>
</head>
<body>

<table class="coll" border="1">
<tr>
<td>Photoshop</td>
<td>Illustrator</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>Firework</td>
</tr>
</table>

<br />

<table class="sep" border="1">
<tr>
<td>Photoshop</td>
<td>Illustrator</td>
</tr>
<tr>
<td>Dreamweaver</td>
<td>Firework</td>
</tr>
</table>

</body>
</html>
บันทึกการเข้า
หน้า: [1]   ขึ้นบน
พิมพ์