วิธีใช้ Bootstrap Tables – สร้างตารางอย่างง่ายด้วย Bootstrap
Pro Tips

วิธีใช้ Bootstrap Tables: สร้างตารางอย่างง่ายด้วย Bootstrap

0

bootstrap table คือ ตัวเลือกที่น่าสนใจสำหรับผู้ที่กำลังมองหาชุดโค้ดที่ใช้เพื่อพัฒนาส่วน Front-End และด้วยเครื่องมือการสร้างตารางที่แสนจะง่ายดายนี้ มันจะช่วยให้คุณสนุกและเพลิดเพลินไปกับการสร้างสรรค์ตารางบนเว็บไซต์ที่มีรูปแบบเป็นเอกลักษณ์เฉพาะตัว ก่อนเริ่มต้นสร้างตารางบนเว็บไซต์เราขอแนะนำวิธีการใช้งานซอร์สโค้ดเบื้องต้นบน bootstrap table เพื่อที่คุณจะได้สามารถกำหนดและตกแต่งตารางของคุณได้ตามใจชอบอย่างอิสระไม่ว่าจะเป็นการจัดขอบ การกำหนดสี การกำหนดการแสดงผล การกำหนดฟังก์ชันเงา และการกำหนดตัวเลือกสวยๆอื่นๆอีกมากมาย ซึ่งคุณสามารถสร้างรูปแบบตารางที่มีความสวยงามเหล่านี้ได้ด้วยคลาสของ bootstraptable ที่มีการกำหนดรูปแบบมาอย่างเสร็จสรรพ์ ดังนั้นโปรดติดตามวิธีการสร้างตารางด้วย bootstrap table จากเนื้อหาด้านล่างต่อไปนี้

Bootstap basic table image

ตาราง Bootstrap Tables คืออะไร?

bootstrap table คือ หนึ่งใน Front-End Framework ที่มีไว้สำหรับใช้งานเพื่อพัฒนาในส่วนของ Front-End เพื่อให้คุณสามารถสร้างตารางได้อย่างอิสระ bootstrap table จึงเปรียบเสมือนกับเครื่องทุ่นแรงที่จะทำให้การทำงานของคุณมีความราบรื่นมากยิ่งขึ้น จุดเด่นที่น่าสนใจของ bootstrap table คือ คุณสามารถใช้งานเพื่อสร้างตารางบน html ได้อย่างอิสระ ทั้งการสร้างเส้น grit การกำหนดขอบ การกำหนดสี และการวาง layout ที่สามารถกดหนดได้ด้วยตนเอง องค์ประกอบต่างๆเหล่านี้ได้กลายเป็นจุดเด่นที่น่าสนใจของ bootstrap table

หากคุณลองเปรียบเทียบการสร้างตารางจาก html แบบดั้งเดิมโดยปราศจาก Front-End สำเร็จรูปที่มีการกำหนดชุดคลาสมาแบบเสร็จสรรพ คุณก็จะพบว่าการเขียนตารางบน html แบบดั้งเดิมนั้นมีความยุ่งยากกว่ามาก เพราะรูปแบบตารางแบบดั้งเดิมนั้นจะสามารถใช้งานได้ค่อนข้างจำกัด ซึ่งปราศจากอิสระในการสร้างสรรค์อย่างชัดเจน นั่นหมายความว่าถ้าหากคุณอยากได้ตารางสวยๆมาประดับไว้บนเว็บไซต์มันก็คงจะเป็นเรื่องที่เป็นไปไม่ได้ ดังนั้นคุณไม่ควรพลาดวิธีการสร้างตารางที่เราจะนำเสนอต่อจากนี้เด็ดขาด ถ้าหากอยากได้เทคนิคดีๆในการสร้างตารางสวยๆที่สามารถกำหนดได้เองแบบไม่ซ้ำใคร

วิธีจัดรูปแบบตารางใน bootstrap

table bootstrap สามารถใช้งานในการสร้างตารางบน html ได้อย่างอิสระ ซึ่งรวมไปถึงการจัดรูปแบบตารางหรือการวาง layout แบบ responsive และ component ถ้าหากคุณต้องการจัดรูปแบบตารางอย่างง่ายเราขอแนะนำให้คุณลองใช้คลาสพื้นฐานของ table bootstrap ด้วย .table ในองค์ประกอบของ <table>

ตัวอย่าง

<table class="table">

    <thead>

        <tr>

            <th>Row</th>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Clark</td>

            <td>Kent</td>

            <td>clarkkent@mail.com</td>

        </tr>

        <tr>

            <td>2</td>

            <td>John</td>

            <td>Carter</td>

            <td>johncarter@mail.com</td>

        </tr>

        <tr>

            <td>3</td>

            <td>Peter</td>

            <td>Parker</td>

            <td>peterparker@mail.com</td>

        </tr>           

    </tbody>

</table>

การสร้างตารางแบบไม่มีเส้นขอบใช้คลาสอะไร?

bootstrap table style สามารถสร้างตารางรูปแบบได้อย่างอิสระทั้งแบบมีขอบและไม่มีขอบ ในกรณีที่คุณต้องการสร้างตารางแบบไม่มีขอบเราขอแนะนำให้คุณใช้คลาส bootstrap table style ด้วย .table-borderless ในองค์ประกอบของ .table

ตัวอย่าง

<table class="table table-borderless">

    <thead>

        <tr>

            <th>Row</th>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>1</td>

            <td>Clark</td>

            <td>Kent</td>

            <td>clarkkent@mail.com</td>

        </tr>

        <tr>

            <td>2</td>

            <td>John</td>

            <td>Carter</td>

            <td>johncarter@mail.com</td>

        </tr>

        <tr>

            <td>3</td>

            <td>Peter</td>

            <td>Parker</td>

            <td>peterparker@mail.com</td>

        </tr>           

    </tbody>

</table>

การสร้างตารางแสดงผลใช้คลาสอะไร?

สำหรับรูปแบบการสร้างตารางแสดงผลบนเว็บไซต์แบบ Responsive เราขอแนะนำให้คุณสร้างตารางแสดงผลด้วยคลาส .table-responsive เพื่อสร้างตาราง สวย ๆ ในการใช้งานคลาสให้คุณทำการแทรก <div> ไว้ในเอลิเมนต์ ซึ่งจะครอบเอลิเมนต์ <table> อยู่อีกที หากยังไม่เห็นภาพโปรดรับชมตัวอย่างด้านล่างนี้

ตัวอย่าง

<div class="table-responsive">

    <table class="table">

        <thead>

            <tr>

                <th>Row</th>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Email</th>

                <th>Biography</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Clark</td>

                <td>Kent</td>

                <td>clarkkent@mail.com</td>

                <td>Lorem ipsum dolor sit amet...</td>

            </tr>

            <tr>

                <td>2</td>

                <td>John</td>

                <td>Carter</td>

                <td>johncarter@mail.com</td>

                <td>Vestibulum consectetur scelerisque...</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Peter</td>

                <td>Parker</td>

                <td>peterparker@mail.com</td>

                <td>Integer pulvinar leo id risus...</td>

            </tr>

        </tbody>

    </table>

</div>

 

คุณอาจชอบ:

Claire Lynch

วิธีตรวจสอบความยาว String ใน PHP

Previous article

วิธีสร้าง Line Notify โดยใช้ PHP – คำแนะนำทีละขั้นตอน

Next article

You may also like

Comments

Comments are closed.

More in Pro Tips