DEX  WAT  LEARN

LEARN  FOR  WEB  DESIGN  WITH  DEX  WAT  DEV

table

HTML table

           HTML Tables คือการสร้างตาราง ในเอกสาร html
           - เราสามารถสร้างตาราง ด้วยแท็ก table ตารางจะแบ่งออกเป็นแถวๆ (ใช้แท็ก tr) และแต่ละแถวจะแบ่งออกเป็นเซลล์ (ใช้แท็ก td) td ย่อมาจาก table data ซึ่งจะเก็บข้อมูลของแต่ละเซลล์ โดยแต่ละเซลล์สามารถใส่ข้อความ, รูปภาพ, แบบฟอร์ม, รายการ หรือ ตารางอื่น ๆ ก็ได้

- การสร้างตาราง
- การผสานเซล แถว
- การผสานเซล คอลัมน์
- แบบทดสอบ




table

การสร้างตาราง

<table>
           <tr>
                      <th> </th>
           </tr>
           <tr>
                      <td> </td>
           </tr>
</table>

           <table> กำหนดตาราง
           <th> กำหนดหัวตาราง
           <tr> กำหนดแถวของตาราง
           <td> กำหนดเซลล์ของตาราง

ตัวอย่าง การสร้างตาราง

<table>
           <tr>
                      <th> ลำดับ </th>
                      <th> สินค้า </th>
                      <th> คงเหลือ </th>
           </tr>
           <tr>
                      <td> 1 </td>
                      <td> water </td>
                      <td> 100 </td>
           </tr>
           <tr>
                      <td> 2 </td>
                      <td> coke </td>
                      <td> 90</td>
           </tr>
           <tr>
                      <td> 3 </td>
                      <td> sprite</td>
                      <td>150 </td>
           </tr>
</table>



ตัวอย่าง การผสานเซล แถว

<table>
           <tr>
                      <th> ลำดับ </th>
                      <th> สินค้า </th>
                      <th> * </th>
                      <th> คงเหลือ </th>
           </tr>
           <tr>
                      <td> 1 </td>
                      <td> water </td>
                      <th rowspan="3"> </th>
                      <td> 100 </td>
           </tr>
           <tr>
                      <td> 2 </td>
                      <td> coke </td>
                      <td> 90</td>
           </tr>
           <tr>
                      <td> 3 </td>
                      <td> sprite</td>
                      <td>150 </td>
           </tr>
</table>

row

การผสานเซล แถว

<td rowspan="จำนวน"> </td>
           การผสานเซล แถวในตาราง เราจะใช้ คำสั่ง rowspan




column

การผสานเซล คอลัมน์

<td colspan="จำนวน"> </td>
           การผสานเซล column ในตาราง เราจะใช้ คำสั่ง colspan

ตัวอย่าง การผสานเซล คอลัมน์

<table>
           <tr>
                      <th> ลำดับ </th>
                      <th> สินค้า </th>
                      <th> คงเหลือ </th>
           </tr>
           <tr>
                      <td> 1 </td>
                      <td> water </td>
                      <td> 100 </td>
           </tr>
           <tr>
                      <td> 2 </td>
                      <td> coke </td>
                      <td> 90</td>
           </tr>
           <tr>
                      <td> 3 </td>
                      <td> sprite</td>
                      <td>150 </td>
           </tr>
           <tr>
                      <td colspan="2"> จำนวนคงเหลือทั้งหมด </td>
                      <td>330 </td>
           </tr>
</table>




แบบทดสอบ


1
- จัดทำตารางเรียนของแต่ละคน

ตัวอย่าง
ตารางเรียน
วัน/เวลา 08.00 - 09.00 09.00 - 10.00 10.00 - 11.00 11.00 - 12.00 12.00 - 13.00 13.00 - 14.00 14.00 - 15.00 15.00 - 16.00
จันทร์ พัก
อังคาร
พุธ
พฤหัสบดี
ศุกร์