วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderators: mindphp, ผู้ดูแลกระดาน

bolue
PHP Super Hero Member
PHP Super Hero Member
Posts: 677
Joined: 04/06/2020 10:05 am

วิธีการ ทำตาราง ด้วย bootstrap เพื่อความสวยงาม ทำตารางย่อตามหน้าจอได้

Post by bolue »

วิธีการ ทำตาราง ด้วย bootstrap เพิ่อความสวยงาม ซึ่งเป็นเป็นการออกแบบ โดยใช้ css อย่างหนึ่ง ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม

Code: Select all

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
import 2 ลิ้งนี้มาใส่ไว้ที่ head ก่อนนะคะ ถึงจะใช้ bootstrap ได้


Code: Select all

      <table class="table">
                        <thead>
                            <tr>
                                <th scope="col" ></th>
                                <th scope="col" >test04</th>
                                <th scope="col" >คนที่มองหา</th>

                            </tr>
                        </thead>
                        <tbody>

                            <tr>

                                <td>ออกกำลังกาย</td>
                                <td>ไม่ได้ออกกำลังกาย</td>
                                <td>ไม่มีคำตอบ</td>
                            </tr>
                            <tr>

                                <td>กีฬาที่ชอบ</td>
                                <td>เจ็ทสกี,ตะกร้อ</td>
                                <td></td>
                            </tr>

                            <tr>

                                <td>งานอดิเรก</td>
                                <td>ไม่มีคำตอบ</td>
                                <td></td>
                            </tr>
                            <tr>

                                <td >เล่นดนตรี เต้นรำ</td>
                                <td ></td>
                                <td ></td>
                            </tr>

                        </tbody>
                    </table>
เป็นรูปแบบของ table นะคะ

Code: Select all

            <thead>
                            <tr>
                                <th scope="col" ></th>
                                <th scope="col" >test04</th>
                                <th scope="col" >คนที่มองหา</th>

                            </tr>
                        </thead>
ส่วน thead จะเป็นส่วนของหัวข้อนะคะ

Code: Select all

                    <tr>

                                <td>ออกกำลังกาย</td>
                                <td>ไม่ได้ออกกำลังกาย</td>
                                <td>ไม่มีคำตอบ</td>
                            </tr>
tr บันทัดแนวนอนนะคะ ส่วน td จะเป็นแนวตั้ง

ผลลัพธ์
Booststap Knowledge-1.png
Booststap Knowledge-1.png (19.62 KiB) Viewed 143 times


หากต้องการที่จะเรียนรู้ css เพิ่มเติม ด้วย bootstrap วิธีการสร้าง nav-tabs โดย bootstrap viewtopic.php?f=76&t=67936 สามารถดูวิธีการทำอื่นๆ มากมายได้จาก Booststap Knowledge viewforum.php?f=76

  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 1 guest