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

การสร้างตาราง
  <table>เป็นแท็กคู่ และแท็กปิดคือ</table>
  <table>เป็นแท็กคำสั่งของตารางทั้งหมด คลุมแท็กต่างๆที่อยู่ใน<table>
  <table>จะคลุมแท็กคำสั่งที่อยู่ภายใน<table>คือ<tr>,<td>ซึ่งทำให้เป็น คอลัมน์และแถว คือ
  <tr>เป็นแท็กคู่ และแท็กปิดคือ</tr>คือ คำสั่งสำหรับแถว 
  <td>เป็นแท็กคู่ และแท็กปิดคือ</td>คือ คำสั่งสำหรับคอลัมน์(ช่อง)
ตัวอย่าง

<html>                                          
     <body>
         <table border="1">
            <tr><td>แถวที่ 1 ช่องที่ 1</td><td>แถวที่ 1 ช่องที่ 2</td></tr>
            <tr><td>แถวที่ 2 ช่องที่ 1</td><td>แถวที่ 1 ช่องที่ 2</td></tr>
         </table>
     </body> 
</html> 

  ผลการแสดง
       แถวที่ 1 ช่องที่ 1 แถวที่ 1 ช่องที่ 2
       แถวที่ 2 ช่องที่ 1 แถวที่ 2 ช่องที่ 2
  จะเห็นได้ว่ายังไม่เป็นรูปตาราง เพราะว่าเรายังไม่ได้ใส่ตัว แอททริบิวต์เสริมให้กับ <table>แอททริบิวต์ที่ใช้กับ<table>คือ border="เลข" ใส่จำนวนเลขให้กำหนด
  ความหนาของเส้นตารางโดยวัดเป็นพิกเซล เช่น <table border="3">
ตัวอย่าง

<html>             
        <body>
                <table border="2">
                     <tr><td>แถวที่ 1 คอลัมน์ที่ 1</td><td>แถวที่ 1 คอลัมน์ที่ 2</td></tr>
                     <tr><td>แถวที่ 2 คอลัมน์ที่ 1</td><td>แถวที่ 2 คอลัมน์ที่ 2</td></tr>
                </table>
        </body>
 </html>


ผลการแสดง

แถวที่ 1 คอลัมน์ที่ 1แถวที่ 1 คอลัมน์ที่ 2
แถวที่ 2 คอลัมน์ที่ 1แถวที่ 2 คอลัมน์ที่ 2
  
  bordercolor="สี" เป็นการกำหนดให้กับสีของเส้นตาราง โดยใส่รหัสสีหรือภาษาลงไป(อังกฤษเท่านั้น) เช่น <table bordercolor="red">
         ตัวอย่าง

<html>
     <body>
         <table bordercolor="red">
            <tr><td>สีเส้นตารางเป็นสีแดง</td></tr>
         </table>
     </body>
</html>

การแสดงผล

  width="เลข" ใส่ตัวเลขเพื่อกำหนดความกว้างจากมุมซ้ายถึงมุมขวาของตาราง วัดเป็นพิกเซลหรือเปอร์เซ็น เช่น<table bordercolor="red" width="100">
     ตัวอย่าง

<html>
     <body>
         <table border="1" width="50%">
             <tr><td>กว้าง 50% คือครึ่งหน้ากระดาษ</td></tr>
         </table>
     </body>
</html>


ผลการแสดง

  height="เลข" ใส่ตัวเลขเพื่อกำหนดความสูงจากบนลงล่างของตาราง วัดเป็นพิกเซลหรือเปอร์เช็น เช่น <table bordercolor="red" height="50%">
     ตัวอย่าง

<html>
     <body>
          <table border="1" height="50%">
              <tr><td>ความสูงครึ่งหน้ากระดาษ</td></tr>
          </table>
     </body>
</html>

ผลการแสดง

  cellspacing="เลข" เป็นการกำหนดระยะห่างของเส้นกับตัวหนังสือ เช่น <table cellspacing="5">
  cellpadding="เลข" เป็นการกำหนดระยะ
ตัวอย่าง

<html>
       <body>
             <table border="5" cellspacing="30">
                  <tr><td>ข้อความ</td></tr>
             </table>
       </body>
</html>


ผลแสดงผล
  
  cellpadding="เลข" เป็นการกำหนดระยะห่างของเส้นกับตัวหนังสือ เช่น <table cellpadding="5">
  cellpadding="เลข" เป็นการกำหนดระยะ
     ตัวอย่าง

<html>
     <body>
         <table border="5" cellpadding="30">
             <tr><td>ข้อความ</td></tr>
         </table>
     </body>
</html>


ผลการแสดง


  การจัดตำแหน่ง ข้อความกับตาราง
  <caption align="top">มีบน,ล่างเท่านั้น
ตัวอย่าง

<html>
     <body>
         <table border="5" width="50%" height="50%">
             <caption align="top">ข้อความอยู่บนสุด</caption>  
             <tr><td>ข้อความ</td></tr>
         </table>
     </body>
</html>

ผลการแสดง



  <caption align="bottom">มีบน,ล่างเท่านั้น
ตัวอย่าง

<html>
     <body>
         <table border="5" width="50%" height="50%">
              <caption align="bottom">ข้อความอยู่ล่างสุด</caption>  
              <tr><td>ข้อความ</td></tr>
         </table>
     </body>
</html>

ผลการแสดง


  เราสามารถใช้โค้ด html หลายอย่างเข้ามาเสริมตบแต่งได้ ไม่ว่าจะเป็น สีข้อความ สีพื้นหลัง ตัวหนังสือใหญ่ เล็ก ฯลฯ เช่น
ตัวอย่าง
<html>
       <body>
               <table border="5" bordercolor="red" width="50%">
                    <tr><td bgcolor="#ffffe6"><font color="red" size="5">ประเทศไทย</font></td><td><font size="5" color="blue">
                    <img src="dog.jpg">หมา</font></td></tr>
                    <tr><td width="100" height="100"><marquee>ข้อความวิ่ง</marquee></td><td width="100" height="100">
                    <a href="http://www.google.com"><center>ไปที่ Google</center></a></td></tr>
                </table>
       </body>
</html>

ผลการแสดง