10 บทความล่าสุด เลือกหมวด
10 ข่าวไอทีล่าสุด
10 วิดีโอคลิปล่าสุด
หมวดหมู่บทความ
หมวดหมู่วิดีโอคลิป
บอทล่าสุดวันนี้
หน้าแรก >>บทความ >> HTML >> HTML การกำหนดลักษณะของตารางด้วย tag table ตอนที่ 2
HTML การกำหนดลักษณะของตารางด้วย tag table ตอนที่ 2
วันพุธที่ 25 เดือน มกราคม พ.ศ.2555 00:00 น.

        วิธีการเปลี่ยนแปลงลักษณะต่างๆของตารางสามารถทำได้โดยการใช้แอททริบิวของ <table> ซึ่งมีอยู่ด้วยกันหลากหลายวิธี เช่น การกำหนดเส้นขอบ การกำหนดขนาดของตารางไม่ว่าจะเป็นความกว้่างความสูง พื้นหลังตาราง หรือแม้การกำหนดตำแหน่งของตารางบนหน้าเว็บเพจ วิธีการที่ว่าสามารถกำหนดได้ดังนี้

        1. การกำหนดสีพื้นหลังให้ตาราง โดยใช้แอททริบิว bgcolor

        รูปแบบ กำหนดค่าให้แอททริบิว bgcolor เป็น blue

            <table bgcolor="blue">
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                </tr>
            </table>

        ผลลัพธ์ที่ได้

100 200 300
400 500 600

        2. การกำหนดพื้นหลังให้ตารางโดยใช้รูปภาพ โดยใช้แอททริบิว background

        รูปแบบ กำหนดค่าให้แอททริบิว background เป็น http://korakitinfo.com/application/img/smsservices1.jpg

            <table background="http://korakitinfo.com/application/img/smsservices1.jpg">
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                </tr>
            </table>

        ผลลัพธ์ที่ได้

100 200 300
400 500 600

        3. การกำหนดรูปแบบการขีดเส้นขอบด้านนอกของตาราง โดยปกติเมื่อเราสร้างตารางเส้นขอบจะไม่ปรากฎ แค่ถ้าเรากำหนดแอททริบิว border จะทำให้เส้นขอบด้านนอกปรากฎทั้ง 4 ด้าน นอกจาก แอททริบิว border เรายังสามารถกำหนดเส้นขอบด้านนอกได้โดยใช้แอททริบิว frame

        ค่าของแอททริบิว frame มีดังนี้

            void เป็นค่าปกติไม่มีเส้นขอบ
            above เส้นด้านนอกจะปรากฎเฉพาะด้านบนเท่านั้น
            below เส้นด้านนอกจะปรากฎเฉพาะด้านล่างเท่านั้น
            hsides กำหนดให้ขีดเส้นในแนวนอน ด้านบนและด้านล่าง
            vsides กำหนดให้ขีดเส้นในแนวตั้ง ด้านซ้ายและด้านขวา
            lhs กำหนดให้ขีดเส้นเฉพาะด้านซ้าย
            rhs กำหนดให้ขีดเส้นเฉพาะด้านขวา
            border กำหนดให้ขีดเส้นทั้ง 4 ด้าน ด้านบน ด้านล่าง ด้านซ้ายและด้านขวา
            box เหมือนกับ border

        รูปแบบ กำหนดค่าให้แอททริบิว frame เป็น hsides

            <table frame="hsides" border="1">
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                </tr>
                <tr>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                </tr>
            </table>

        ผลลัพธ์ที่ได้

100 200 300
400 500 600
700 800 900

        4. การกำหนดรูปแบบการขีดเส้นขอบด้านในของตาราง เราสามารถกำหนดเส้นขอบด้านในได้โดยใช้แอททริบิว rules

        ค่าของแอททริบิว rules มีดังนี้

            none เป็นค่าปกติไม่มีเส้นขอบ
            groups เป็นค่าปกติไม่มีเส้นขอบ
            rows กำหนดให้ขีดเส้นในแนวนอน 
            cols กำหนดให้ขีดเส้นในแนวตั้ง
            all กำหนดให้ขีดเส้นในแนวตั้งและแนวนอน

        รูปแบบ กำหนดค่าให้แอททริบิว rulesเป็น hsides

            <table rules="rows" border="1">
                <tr>
                    <td>100</td>
                    <td>200</td>
                    <td>300</td>
                </tr>
                <tr>
                    <td>400</td>
                    <td>500</td>
                    <td>600</td>
                </tr>
                <tr>
                    <td>700</td>
                    <td>800</td>
                    <td>900</td>
                </tr>
            </table>

        ผลลัพธ์ที่ได้

100 200 300
400 500 600
700 800 900

บทความที่เกี่ยวข้อง

View All
สอน XML        สอน MYSQL        สอน CSS        สอน HTML        สอน PHP        Sitemap        แลกลิ้งกับเรา         
Back to top
2011-2018 All Rights Reserved by  korakitinfo.com  E-Mail : korakit.wiw@korakitinfo.com
Page rendered in 0.0245 seconds
  www.korakitinfo.com