สร้างตาราง html
CSS/HTML

สร้างตาราง HTML และ CSS

admin

การสร้างตาราง html แท็กที่ใช้บ่อยๆก็คือ <table> คำสั่งสร้างตาราง | <tr> คำสั่งสร้างแถว | <th> คำสั่งสร้างหัวคอลัมน์ | <td> คำสั่งสร้างคอลัมน์

Tag ที่ใช้ในการสร้างตาราง

ตารางส่วนประกอบหลักๆ จะประกอบด้วย แถว<Row> และ คอลัมน์ <Column>

<table>…</table>คำสั่งเริ่มต้นการสร้างตาราง
<tr>…</tr>คำสั่งสร้างแถว
<th>…</th>คำสั่งสร้างส่วนหัวของคอลัมน์
<td>…</td>คำสั่งสร้างสร้างคอลัมน์
<thead>…</thead>ประกาศกลุ่มหัวคอลัมน์
<tbody>…</tbody>ประกาศกลุ่มเนื้อหา
<tfoot>…</tfoot>ประกาศกลุ่มส่วนท้ายตาราง
<caption>…</caption>สร้างหัวเรื่อง
<col>…</col>ระบุคุณสมบัติของคอลัมน์แต่ละคอลัมน์ใน colgroup
<colgroup>…</colgroup>ระบุกลุ่มคอลัมน์
ลำดับชื่อพนักงานยอดขาย
1นายเอ500,000
2นายบี400,000
3นายซี380,000
4นายดี15,000
5นายโอ370,000

ตัวอย่างโค๊ด

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            text-align: center;
            background-color: #ffc107;
            color: #000000;
        }
        td,
        th {
            border: 1px solid #868583;
            padding: 12px;
        }
        tr:nth-child(even) {
            background-color: #ececec;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>ลำดับ</th>
            <th>ชื่อพนักงาน</th>
            <th>ยอดขาย</th>
        </tr>
        <tr>
            <td>1</td>
            <td>นายเอ</td>
            <td>500,000</td>
        </tr>
        <tr>
            <td>2</td>
            <td>นายบี</td>
            <td>400,000</td>
        </tr>
        <tr>
            <td>3</td>
            <td>นายซี</td>
            <td>380,000</td>
        </tr>
        <tr>
            <td>4</td>
            <td>นายดี</td>
            <td>15,000</td>
        </tr>
        <tr>
            <td>5</td>
            <td>นายโอ</td>
            <td>370,000</td>
        </tr>
    </table>
</body>
</html>

ใส่กรอบตารางและความกว้างตาราง

กำหนดกรอบตารางให้เป็นเส้นเดียว หากไม่กำหนดเส้นตารางจะมี 2 ชั้น และกำหนดให้ตารางมีความกว้าง 100%

 table {
            border-collapse: collapse;
            width: 100%;
        }

จัดข้อความและระยะห่างของตาราง

ตัวอย่างการกำหนด สี Background, ตัวอักษร, เส้นขอบ และตำแหล่งของข้อความในเซล

 th {
        text-align: center;
        background-color: #ffc107;
        color: #000000;
     }
td,
th {
        border: 1px solid #868583;
        padding: 12px;
    }

ตารางแถวสลับสี

 tr:nth-child(even) {
            background-color: #ececec;
        }
 tr:nth-child(old) {
            background-color: #ffffff;
        }

ตัวอย่างการรวมเซลในตาราง

ชื่อพนักงานยอดขายเดือน
ม.ค.ก.พ.มี.ค.เม.ย.
นายเอ500,000400,000300,000200,000
นายบี400,000700,000600,000100,000

ตัวอย่างโค๊ด

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        th {
            text-align: center;
            background-color: #ffc107;
            color: #000000;
        }
        td,
        th {
            border: 1px solid #868583;
            padding: 12px;
        }
        tr:nth-child(even) {
            background-color: #ececec;
        }
    </style>
</head>
<body>
    <table style="width:100%">
        <tr>
            <th rowspan="2">ชื่อพนักงาน</th>
            <th colspan="4">ยอดขายเดือน</th>
        </tr>
        <tr>
            <th>ม.ค.</th>
            <th>ก.พ.</th>
            <th>มี.ค.</th>
            <th>เม.ย.</th>
        </tr>
        <tr>
            <td>นายเอ</td>
            <td>500,000</td>
            <td>400,000</td>
            <td>300,000</td>
            <td>200,000</td>
        </tr>
        <tr>
            <td>นายบี</td>
            <td>400,000</td>
            <td>700,000</td>
            <td>600,000</td>
            <td>100,000</td>
        </tr>
    </table>
</body>
</html>

รวมเซลแนวตั้ง rowspan

rowspan คือการรวมแถวหลายๆ แถวเป็นเซลล์เดียวกัน  rowspan=”จำนวนแถวที่ต้องการรวม” จากตัวอย่างคือ เราต้องการให้ชื่อสินค้าคือ กระเป๋าและเป้ มี 2 แถว

ชื่อสินค้าราคาจำนวน
กระเป๋าถือและเป้5,000100
9001,000

<style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td,
        th {
            border: 1px solid #868583;
            padding: 12px;
        }
</style>
<table>
        <tr>
            <th>ชื่อสินค้า</th>
            <th>ราคา</th>
            <th>จำนวน</th>
        </tr>
        <tr>
            <td rowspan="2">กระเป๋าถือและเป้</td>
            <td>5,000</td>
            <td>100</td>
        </tr>
        <tr>
            <td>900</td>
            <td>1,000</td>
        </tr>
</table>

รวมเซลแนวนอน colspan

colspan คือการรวมคอลัมน์หลายๆ คอลัมน์เป็นเซลล์เดียวกัน  colspan=”จำนวนคอลัมน์ที่ต้องการรวม” จากตัวอย่างคือ เราต้องการให้คอลัมน์ ราคาและจำนวนรวมกัน

ชื่อสินค้าราคาและจำนวน
กระเป๋าถือ5,000100
กระเป๋าเป้1,000500
<style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td,
        th {
            border: 1px solid #868583;
            padding: 12px;
        }
</style>
    <table>
        <tr>
            <th>ชื่อสินค้า</th>
            <th colspan="2" style="text-align:center;">ราคาและจำนวน</th>
        </tr>
        <tr>
            <td>กระเป๋าถือ</td>
            <td>5,000</td>
            <td>100</td>
        </tr>
        <tr>
           <td>กระเป๋าเป้</td>
           <td>1,000</td>
           <td>500</td>
        </tr>
    </table>

Attribute ที่ใช้ร่วมกับตาราง

colspanรวมคอลัมน์เข้าด้วยกัน
rowspanรวมแถวเข้าด้วยกัน
borderกำหนดเส้นขอบตาราง
bordercolorกำหนดสีเส้นขอบตาราง
cellpaddingกำหนดระยะห่างระหว่างเซล
cellspancingกำหนดช่องว่างภายในเซล
valignกำหนดตำแหน่งข้อความแนวตั้ง ในเซล top | middle | bottom | baseline
alignกำหนดตำแหน่งข้อความแนวนอน ในเซล left | center | right
widthกำหนดความกว้าง
idกำหนดค่าในตารางที่ไม่ซ้ำกัน ใช้ร่วมกับ CSS
classกำหนดค่าในตารางที่ซ้ำกันกัน ใช้ร่วมกับ CSS

Related Posts