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

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

        1. การกำหนดเส้นขอบของตาราง โดยปกติเราจะไม่เห็นเส้นขอบของตาราง โดยเส้นขอบของตารางจะมี 2 ลักษณะ คือ เส้นขอบด้านนอกและเส้นของของแต่ละช่องในตาราง

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

            <table border="1">
                <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. การเปลี่ยนสีเส้นขอบตาราง เราสามารถเปลี่ยนสีเส้นขอบตารางได้โดยการใช้แอททริบิว bordercolor

รูปแบบ กำหนดค่าให้แอททริบิว bordercolor เป็น #F60000 (สีส้ม)

            <table border="1" bordercolor="#F60000">
                <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.การกำหนดขนาดของตาราง ขนาดของตารางสามารถกำหนดได้ทั้งความกว้างและความสูง โดยใช้แอททริบิว width และ height ตามลำดับ

รูปแบบ กำหนดค่าให้แอททริบิว width เป็น 100 และ height เป็น 150

            <table border="1" width="100" height="150">
                <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

        4.การกำหนดตำแหน่งของตารางในหน้าเว็บเพจ โดยปกติเมื่อเราสร้างตารางบราวเซอร์จะจัดให้ตารางชิดซ้ายเสมอ เราสามารถกำหนดตารางให้ ชิดซ้าย ชิดขาว หรือตรงกลางได้ โดยใช้แอททริบิว align

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

            <table border="1" align="center">
                <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

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

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.0207 seconds
  www.korakitinfo.com