• ใช้ไฟร์ฟอกซ์กันเถอะ
  • คำแนะนำ24ข้อที่บล็อกเกอร์ควรรู้

ใช้ css ช่วยตกแต่ง table

posted on 24 Sep 2008 03:08 by palermos in indesign

สำหรับเอนทรี่นี้นะครับ ผมจะมานำเสนอ (ไม่ใช่คำว่าสอนนะ)  เทคนิคการใช้ css เพื่อตกแต่งตารางที่สร้างด้วย tag <table><table>ซึ่งการใช้ตารางในการออกแบบเว็บ หรือบล็อกมันก็ไม่ได้เป็นสิ่งที่น่ารังเกียจในการออกแบบเว็บมาตรฐาน 2.0 นะ หลายๆคนพอคล่องการใช้ div แล้ว ก็จะไม่สนใจการสร้างตารางด้วย table ซึ่งการใช้ตารางมันก็ไม่ได้เป็นข้อห้ามของ w3 นะครับ ตรงกันข้ามมันก็ใช้งานง่าย (แต่โค้ดยาว...เท่านั้นแหละ) ซึ่งถ้าเราสร้างตารางด้วย div มากกว่า 1คอลัมน์ ในคลาสเดียวกันนั้น เวลาสั่งให้เรียงคอลัมน์กัน ก็ต้องพิมพ์ค่า display กับ float ไม่เช่นนั้นกล่อง div มันจะขี่คอกัน

อ่านพื้นฐานการสร้าง div เป็นตารางกันได้ที่เว็บนี้ครับ

ถ้าเป็นตารางคอลัมน์เดียวผมว่าใช้ div ง่ายกว่าเยอะแต่ถ้ามากกว่า 2 ก็ต้องใส่ propertiesกันอุตลุต งั้นกลับไปเล่นเบสิคๆด้วย table ดู

สำหรับโครงสร้าง html ตารางจะมีลักษณะอย่างรูปนี้นะครับ (ตาม มาตรฐาน xhtml1.0 ซึ่ง  iDoctype แบบ html 4.01 ใน exteen ก็ใช้ได้เหมือนกัน)

<table id="ใส่กรณีที่เรียกจาก# " class="ใส่กรณีที่เรียกจาก. ">
<!-- Table header -->
    <thead>
        <tr>
        <th scope="col">หัวตาราง1</th>
        <th scope="col">หัวตาราง2</th>
        </tr>
    </thead>
    <!-- Table footer-->
        <tfoot>
       <tr>
            <td>ท้ายตาราง1</td>
        <td>ท้ายตาราง2</td>
        </tr>
    </tfoot>
<!-- Table body -->
    <tbody>
        <tr>
            <td>เซลล์1</td>
        <td>เซลล์2</td>
        </tr>
        <tr>
            <td>เซลล์3</td>
        <td>เซลล์4</td>
        </tr>
    </tbody>
</table>   

ข้างต้นเป็นโค้ดhtmlทั่วไปของตาราง3*2 และท่านสามารถหาอ่านพื้นฐานภาษา HTML table  เพิ่มเติมทีนี่ครับ

ในแท็ก html แบ่งเป็นสามส่วน คือ

  • thead คือ ตัวหัวตาราง
  • tbody คือ ตัวเนื้อตาราง
  • tfoot คือ ท้ายตาราง

ปกติผมไม่ค่อยเห็นใครใส่ thead กับ tfoot กันเท่าไหร่นะ สงสัยคงจะโค้ดตารางใน Dreamweaverจนเคยตัวกัน ซึ่งโค้ดผ่านโปรแกรมที่ว่า บางทีเราก็ได้โค้ดแบบรกๆ มาเยอะเหมือนกันนะครับ

 

ลองมาดูตารางตัวนี้ี ที่ผ่านการตกแต่งด้วย css

# Club P GD PTS
1 Arsenal 5 9 12
2 Chelsea 5 7 11
3 Liverpool 5 3 11
4 Aston villa 5 3 10
5 Man City 5 8 9

โค้ด html ของตัวอย่างข้างต้น

ซึ่ง css โค้ดตัวนี้คือ

.simply{
font:14px Trebuchet MS, Tahoma;
margin: 45px;
width: 480px;
border-collapse: collapse;
text-align: left;
}
.simply th{
font:normal 16px Trebuchet MS, Tahoma;
color: #222;
background:#cbeffd;
padding: 10px 8px;
border-bottom: 2px solid #ccc;
}
.simply td{
border-bottom: 1px solid #ccc;
color: #666;
background: #fff;
padding: 5px;
}
.simply tbody tr:hover td{
color: #222;
background: #eee;
}

 

ลองเอาไปประยุกต์ใช้กันดูนะครับ เพิ่มค่า class="simply" ใน แท็ก html <table class="simply">ที่บรรทัดแรก แล้วก็ปรับเปลี่ยนค่าในแต่ละคลาสตามความต้องการ จะใส่ตารางขอบโค้งก็สามารถทำได้เช่นกัน หรือจะใส่รูปพื้นหลังในตารางก็ปรับค่าใน .simply ได้เลย แค่พอมีพื้นฐานการเขียน css เท่านั้นครับ

ปล. เอนทรี่นี้นั่งเขียนให้เป็นเรื่องเป็นราวอยู่สองวันแหนะ...  บ้าพลังชิบ 

Comment

Comment:

Tweet

#31 By (223.207.210.241|223.207.210.241) on 2015-09-03 18:37

big smile open-mounthed smile confused smile sad smile angry smile tongue question embarrassed surprised smile wink double wink cry

#30 By (182.52.61.68|182.52.61.68) on 2015-06-11 11:48

#29 By (182.52.61.68|182.52.61.68) on 2015-06-11 11:43

#28 By (49.48.184.30|49.48.184.30) on 2015-02-24 20:31

#27 By (118.174.31.132|172.16.207.188, 118.174.31.132) on 2015-02-09 12:55

tongue angry smile

#26 By (171.99.224.234|171.99.224.234) on 2014-12-12 21:26

#25 By (223.205.44.103|223.205.44.103) on 2014-10-22 22:22

#24 By (180.180.77.252|180.180.77.252) on 2014-06-11 02:33

แมนซิตี้ กากวะ

#23 By nut (119.46.90.74) on 2013-08-16 14:40

ไม่เป็นไรครับ ผมสามารถทำขอบมนได้แล้วครับ เอาโค๊ดมาให้ เผื่อเป็นประโยนชน์สำหรับผู้อื่นครับ
.simply thead :nth-child(9) {
border-top-right-radius:10px;
}
------------------
nth-child(9) คำสั่งนี้คือบังคับให้ฟิลของ thead ครับ ว่าต้องการให้ฟิลนั้นทำอะไร

#22 By Nut (103.7.57.18|61.90.104.202) on 2013-05-02 15:39

sad smile  รบกวนสอบถามหน่อยครับ คือ ผมอยากได้ขอบตารางด้านบนซ้ายขวาเป็นขอบมนอะครับ ผมใส่คำสั่ง 
border-top-left-radius: 10px;
border-top-right-radius: 10px;
ลงไปในคลาส simply แล้วลองใส่ที่ต่างๆ ดู สลับไปมา ก็ไม่เกิดอะไรอะครับ อยากรบกวนชี้แนะแนวทางนิดนึงครับ ว่าทำอย่างไร ถึงจะได้ขอบมนครับ ขอบคุณมากครับ สำหรับความรู้ดีๆ และดีมากๆ ครับ

#21 By Nut (103.7.57.18|61.90.104.202) on 2013-05-02 15:20

พี่ครับ ผมเอาไปใช้แล้วทำไมตารางชิดซ้ายครับ
ทั้งๆที่ผมกำหนดให้ aling center แล้วนะครับ ช่วยแก้ให้หน่อย

#20 By kunnawut (103.7.57.18|1.4.148.213) on 2012-09-06 13:47

อีกอย่าง ฟอรั่มก็เก๋ไก๋ดีครับ

#19 By admiral (180.180.7.6) on 2012-01-28 20:01

สวยมาก ครับ

#18 By admiral (180.180.7.6) on 2012-01-28 19:56

♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥
♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥♥

#17 By masters dissertations (182.178.20.100) on 2011-10-03 03:49

ขอบคุณมากครับ

#16 By five (223.205.226.19) on 2011-09-24 21:46

Your blog is really helps for my search and i really like it.. Thanks a lot..:)

<a href=>book report writing</a>http://www.dissertations-writing.co.uk/book_review.htm

#15 By Book Report Writing Help (119.155.131.172) on 2010-12-23 19:11

Excellent & remarkable post!
I have been visiting various blogs for my Book report help. I have found your blog to be quite useful. Keep updating your blog with valuable information....... Regards

#14 By Book report help (182.178.0.2) on 2010-10-04 11:28

กำลังหาอยู่พอดี ขอบคุณมากครับ
ความรู้ดีๆอย่างนี้
ถ้าไม่มีการถ่ายทอด แล้วเราจะไปสู่ต่างประเทศเข้าได้ไง
ใครมีความรู้ดีๆ ก็ถ่ายทอดให้ใครไว้บางนะครับเดียวมันจะหายไปกับตัวเรา
ขอบคุณอีกครังสำหรับความรู้ครา...บbig smile open-mounthed smile confused smile question

#13 By krabongped (124.120.149.248) on 2008-12-21 21:14

Big Thanksss

Hot! question

#12 By ...tO..FeEL..LoNely.... on 2008-09-25 00:06

แจกคลิปอย่างว่านี่มาไงคะ sad smile

อ่ะให้ Hot!
คร่อก...sad smile sad smile แพ้แล้วยอมแพ้แล้วว

#10 By (^_^)/nana on 2008-09-24 15:49

ความรู้ใหม่ๆ ขอบคุงคับ Hot! Hot!

#9 By yium on 2008-09-24 15:30

ใช้เวลาเขียนยาวนานจริงๆbig smile
คงต้องทำดูถึงจะเข้าใจ
อ่านไปแล้วงงๆsad smile

#8 By ~memay~ on 2008-09-24 14:01

ผมเป็นโปรแกรมเมอร์อ่ะนะ
แต่ผมไม่ถนัดการเขียนแบบ css เท่าไหร่เลย
มีหนังสือแนะนำบ้างป่ะครับ
เจ๋ง!
เยี่มม!
แปะ!
Hot!

#6 By xViStA on 2008-09-24 11:45

ใช้เวลาเขียนนานมาก ต้องให้Hot!

#5 By Meowzilla Zilla on 2008-09-24 11:07

wow

good job sad smile

#4 By Milkyway.sk on 2008-09-24 09:41

สงสัยต้องลองทำถึงจะเข้าใจsad smile Hot!

#3 By iQ180 on 2008-09-24 08:35

ไม่ยากนะจ๊ะ

ง่ายๆ ถ้าเราสร้างตารางใน Dreamweaver ตามปกติ ก็กอปปี้ html code ตารางมาใส่ในโหมด WYSIWYG แล้วก็เพิ่ม
class ตรงหัวตาราง ในแทค table

ส่วน css ก็แปะท้ายๆ css editor ได้เลยครับ
ตารางขอบโค้งก็ทำได้นะ

#2 By palermos on 2008-09-24 08:14

สุดยอดมากค่ะ
/แต่รู้สึกจะระดับสูงกว่าตัวเราไปหน่อยแฮ่ะsad smile