เปลี่ยนใจมาใช้ 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%;
}

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

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

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

  1. คิว

    ทดสอบจากโอเปร่ามินิ บนโนเกีย 6681 ใช้ได้เลยทีเดียว

    Reply

  2. SvZ

    อ้า…..

    Reply

  3. iake

    แบบนี้เพิ่งเคยเห็นอ่ะ ตรงดอกจันทร์

    div#table * {padding: 0;margin: 0;font-family: Georgia, "Times New Roman", Times, serif;}


    ———-
    http://iake.blogspot.com

    Reply

  4. ผ่านมา

    จริง ๆ แล้วการทำเอกสาร XHTML ที่ถูกต้องนั้นจะต้องใช้ <h1> เป็นหัวเรื่องแรกเสมอนะครับ จากนั้นจึงค่อยตามด้วยหัวข้อย่อยอื่น ๆ เป็น <h2>, <h3>, <h4> …. เป็นต้น (แต่ไม่จำเป็นต้องใช้ทั้งหมด ขึ้นอยู่กับโครงสร้างเอกสาร) ถ้าจะบอกว่า <h1> ตัวใหญ่ไป อันนี้ไม่ใช่ปัญหาครับ CSS เปลี่ยนขนาดมันได้

    แต่ก็ขอบคุณเว็บนี้ครับที่เริ่มนำ XHTML กับ CSS มาแนะนำ เพราะในเมืองไทย นอกจากองค์กรที่ทำงานด้านคนพิการบางองค์กรแล้ว ก็แทบจะไม่มีคนไทยที่ไหนสนใจ XHTML กับ CSS อย่างจริง ๆ จัง ๆ เลย ใช้กันก็ผิด ๆ ถูก ๆ

    ดูแล้วผู้ดูแลเว็บนี้น่าจะเก่งน่าดู มีบทความที่น่าสนใจหลายเรื่องทีเดียว ผมขอเพิ่มเรื่อง WCAG 2.0 หรือ Web Content Accessibility Guidelines 2 (หรือ WCAG 1.0 ก็ได้ แต่เก่าแล้ว) เป็นเรื่องใหม่ให้ท่านทั้งหลายไปศึกษากันบ้างดีไหมครับ การทำเว็บนั้นควรจะคำนึงถึง Digital Divide ด้วย เราจะไปคนเดียวโดยทิ้งคนบางกลุ่มไว้เบื้องหลังก็ดูจะไม่ยุติธรรมนัก

    Reply

  5. DarkNet02

    งง – -* เหมือนเดิม

    Reply

  6. ถาม

    ผมใช้ Opera ตัวอย่างมี error ด้วย

     

     
    CSS –https://www.thaicss.com/lessons/div_table.php

     
    Inlined stylesheet

     
    Unknown pseudo class

     
    Line 43:

     
    #table ul li:last-child {

     
    ———————–^

     

     
    สงสัยจังเลยทำไมครับ

    Reply

  7. หมอ

    n ผม ใช้ IE7 เปิด ก็ปกติ ดี ครับ

     
    1 1 1 1 1 1 1 1

     

    Reply

Leave a Reply to ถาม Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial