การสร้างตารางโดยใช้ class ของ Booststap

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

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

ภาพประจำตัวสมาชิก
fonfonn
PHP VIP Members
PHP VIP Members
โพสต์: 4983
ลงทะเบียนเมื่อ: 11/07/2022 9:28 am

การสร้างตารางโดยใช้ class ของ Booststap

โพสต์ที่ยังไม่ได้อ่าน โดย fonfonn »

ในการออกแบบหน้าเว็บนั้นการจะจัดหน้าให้มีความสวยงามเป็นระเบียบนั้นสามารถทำได้หลายวิธี เช่นการกำหนดตาราง การใช้ css ในการกำหนดกล่องข้อความ ซึ่งในบทความนี้ก็จะแนะนำการจัดรูปแบบหน้าเว็บให้มีความเป็นระเบียบได้เช่นเดียวกับการใช้ แท็ก table ซึ่งจะเป็นการใช้ คลาสของ bootstrap แทน โดยในบทความนี้จะสอนเกี่ยวกับการสร้างตารางโดยไม่ใช้ แท็ก table ดังนี้
  • ตัวอย่างที่ 1 การสร้าง row และ col แบบไม่มีการกำหนดใส่เส้นแบ่งแต่ละช่อง

    โค้ด: เลือกทั้งหมด

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%">
                <div class="col" >ช่องที่ 1</div>
                <div class="col" >ช่องที่ 2</div>
                <div class="col" >ช่องที่ 3</div>
              </div>
            </center>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    Picture1.png
    Picture1.png (5.96 KiB) Viewed 431 times
  • ตัวอย่างที่ 2 การสร้าง row และ col แบบมีการกำหนดใส่เส้นแบ่งแต่ละช่อง

    โค้ด: เลือกทั้งหมด

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%">
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 1</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 2</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 3</div>
              </div>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    Picture2.png
    Picture2.png (5.63 KiB) Viewed 431 times
  • ตัวอย่างที่ 3 การสร้าง row และ col แบบมี row หลายๆอัน

    โค้ด: เลือกทั้งหมด

    <HTML>
        <HEAD>
            <TITLE> mdsoft_html_trial_balance_print </TITLE>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
        </HEAD>
        <body>
            <center>
            <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%">
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 1</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 2</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 3</div>
              </div>
    
              <div class="row" style="border: solid 1px rgb(0, 0, 0); width: 70%">
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 4</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 5</div>
                <div class="col" style="border: solid 1px rgb(0, 0, 0);">ช่องที่ 6</div>
              </div>
            </center>
        </body>
    </HTML>
    ผลลัพธ์ที่ได้
    Picture3.png
    Picture3.png (8.95 KiB) Viewed 431 times
จากการเขียนในตัวโค้ดในแท้กของ HTML จะเห็นได้ว่า มีการใช้ class="row" ในการกำหนด ตัวแถว ซึ่งจะใช้ครอบตัวแท็ก class="col" ไว้ โดย class="col" จะใช้แทน คอลัมในแต่ละแถว ซึ่งเราอยากมีกี่คอลลัมในหนึ่งแถว ก็สามารถเพิ่มได้ในจุดนี้ นอกจากนั้นเรายังสามารถกำหนด style ต่าง ๆ เพิ่มได้ เช่นการใส่เส้นหรือไม่แสดงเส้น หรือการกำหนดกว้างยาวของช่อง ก้สามารถทำได้ใน แท็กของ style

อ้างอิง https://getbootstrap.com/docs/4.0/layout/grid/
you're the only one treasure💎
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 68