เปลี่ยนใจมาใช้ div แทน table ตอนที่ 3 (สร่างเมา)

ถ้าเราจะสร้างตารางสักอัน โดยที่ไม่ต้องใช้ table แล้วเราสามารถใช้อะไรได้บ้าง ในความเป็นจริงอย่างที่เคยบอกกล่าวกันไว้ ถ้าข้อมูลอันไหนมันแสดงผลเป็นตาราง มันก็ควรที่จะเป็น table tag แต่ ถ้ามันดันเปิดดูกับ Devices อื่นๆ แล้วมันมีปัญหา แล้วเราจะใช้มันทำไมหละ

วันนี้เรามา ชิลด์ๆ กันกับการนำเสนอข้อมูลแบบตารางด้วยวิธีอื่นกันบ้าง ที่ไม่ใช่ทั้ง div หรือ table บอกแล้วว่า เมา div มันไม่ได้ เหมือนเขาให้กินเหล้า แต่เราแดกแต่กับแกล้มอย่างเดียว มันก็ไม่เข้าท่าแลเข้าพวก

คำเตือน ตัวอย่างโค้ดต่อจากนี้ไป ไม่ญาติดีกับ M$IE ทั้ง 6 และ 7

เพราะฉะนั้น กรุณาใช้ Firefox หรือ Opera ในการเรียกดูหรือทดสอบ

ไม่ใช่ว่ามันทำแบบอื่นที่สามารถรองรับไออีไม่ได้ ทำได้ครับ ง่ายด้วย แต่ ไม่ทำ แบบนี้ง่ายกว่า อย่าตามมันมากนักถ้าเลือกได้ หลักๆ ที่ผมใช้ css แบบ ธรรมดาแต่ประหลาดสำหรับไออีคือ :first-child และ :last-childซึ่ง ไออียังโง่อยู่ จึงไม่สามารถแสดงผลได้ถูกต้องตามมาตรฐานสากล

ผมทดสอบตัวอย่างกับข้อมูลอันดับหนังทำเงิน ประจำสุดสัปดาห์ week of 4 May 2007 ข้อมูลจาก www.imdb.com (อ้างอิงที่มาให้เขาหน่อย) งานนี้เราล่อ div 1 ตัว (ไม่มีก็ยังได้ ไม่รู้ใส่มาทำเฮียอะไร) ul 1 ชิ้น li, p, strong, span, em, h2, h4 ครบสูตร (เตี๋ยว)

และลุยโค้ดกัน

เริ่มจาก XHTML Code

<div id=”table”>

<h2>USA Weekend Box-Office Summary</h2>

<h4>week of 4 May 2007</h4>

<ul>

<li id=”header”><p><span>Rank</span><strong>Title</strong><span>Week</span><em>Gross</em></p></li>

<li><p><span>1</span><strong>Spider-Man 3 (2007)</strong><span>$5.84M</span><em>$60M</em></p></li>

<li><p><span>2</span><strong>Disturbia (2007)</strong><span>$3.7M</span><em>$26.7M</em></p></li>

<li><p><span>3</span><strong>Fracture (2007)</strong><span>$3.26M</span><em>$12.5M</em></p></li>

<li><p><span>4</span><strong>The Invisible (2007)</strong><span>$3.26M</span><em>$12.5M</em></p></li>

<li><p><span>5</span><strong>Next (2007)</strong><span>$2.89M</span><em>$12M</em></p></li>

<li><p><span>6</span><strong>Lucky You (2007)</strong><span>$2.71M</span><em>$2.71M</em></p></li>

<li><p><span>7</span><strong>Meet the Robinsons (2007)</strong><span>$2.62M</span><em>$91.9M</em></p></li>

<li><p><span>8</span><strong>Blades of Glory (2007)</strong><span>$2.41M</span><em>$112M</em></p></li>

<li><p><span>9</span><strong>Hot Fuzz (2007)</strong><span>$2.22M</span><em>$16.3M</em></p></li>

<li><p><span>10</span><strong>Are We Done Yet? (2007)</strong><span>$1.74M</span><em>$46.2M</em></p></li>

</ul>

</div>

และต่อด้วย CSS Code

body h2 {

color: #FF0000;

}

div#table * {

padding: 0;

margin: 0;

font-family: Georgia, “Times New Roman”, Times, serif;

}

div#table h2 {

color: #FF9900;

}

div#table h4 {

margin-bottom: 10px;

color: #CCCCCC;

}

#table ul li {

list-style-type: none;

display: block;

width: 100%;

padding: 0.5em 0;

float: left;

border-bottom: solid 1px #f8f8f8;

}

#table ul li#header {

display: block;

width: 100%;

float: left;

background: #f8f8f8;

font-weight: bold;

font-size: 150%;

}

#table ul li:first-child {

border-top: solid 3px #333333;

border-bottom: solid 1px #333333;

}

#table ul li:last-child {

border-bottom: solid 3px #333333 !important;

}

#table ul li p span:first-child {

float: left;

width: 5%;

text-align: center;

}

#table ul li em {

font-style: normal;

}

li#header p strong {

text-align: center;

}

#table ul li p {

line-height: 18px;

}

#table ul li p strong, span, em {

display: block;

float: left;

}

#table ul li#header p em {

font-weight: bold;

font-style: normal;

}

#table ul li p strong {

width: 45%;

}

#table ul li p span, em {

width: 25%;

}

สำหรับตัวอย่างการแสดงผล เชิญที่นี่ครับ