ไม่มีหมวดหมู่

download font

ดาวน์โหลดฟอนต์ download font

download icon

ดาวน์โหลด ไอค่อน จากสะดุ้ง

download template

ดาวน์โหลด เทมเพลตเว็บต่างๆ

Download Vector

ดาวน์โหลดภาพเว็กเตอร์ จากสะดุ้ง

ของเสริม photoshop

brush style patterns

Home » html เบื้องต้น

การสร้างตารางในภาษา HTMl

Submitted by on วันเสาร์, 29 มกราคม 20114 Comments


คำค้นหา: , ,

html table การสร้างตารางในภาษา HTMl

table html

การสร้างตารางในเว็บเพจ ในภาษา HTML เราจะใช้แท็ก table ในการสร้างตาราง
โดยการใช้แท็ก table อย่างเดียวจะไม่ออกมาเป็นตาราง ต้องมีแท็ก tr และ td มาประกอบกันด้วย อธิบายคร่าวๆก่อนสำหรับแท็กดังกล่าว
<table></table> ใช้ในการวาตาราง

html table การสร้างตารางในภาษา HTMl

table html


<tr></tr> ใช้ในการกำหนด แถวในตารางว่ามีกี่ตาราง
html tr การสร้างตารางในภาษา HTMl

html table tr

<td></td> ใช้ในการกำหนดคอลัมน์ ว่าในแต่ละแถว มีกี่คอลัมน์
html td การสร้างตารางในภาษา HTMl

html table td

อธิบายคร่าวๆ ไปแล้วก็ลองสร้างตาราง กันเลยครับ ตัวอย่าง สร้างตารางขนาด 2 แถว 2 คอลัมน์ โดยใช้ tag table

ตัวอย่าง

<table>
<tbody>
<tr>
<td>แถวที่ 1 คอลัมน์ที่ 1</td>
<td>แถวที่ 1 คอลัมน์ที่ 2</td>
</tr>
<tr>
<td>แถวที่ 2 คอลัมน์ที่ 1</td>
<td>แถวที่ 2 คอลัมน์ที่ 2</td>
</tr>
</tbody>
</table>

ผลที่ได้คือ

table code1 การสร้างตารางในภาษา HTMl

table


หลักจากที่เรารู้โครงสร้างคร่าวๆของการสร้างตารางแล้ว เราก็มาดูในส่วนของการตกแต่งตารางกันบ้าง ว่าจะตกแต่งอะไรได้บ้าง

ความกว้าง ใช้คำสั่ง width=”..” หน่วยจะเป็น px หรือ % ก็ได้แล้วแต่ความต้องการของเรา ความกว้างนี้เราสามารถกำหนด
ความกว้างของตาราง ความกว้างของแถว หรือความกว้างของเซล ได้ด้วย วิธีใช้ กำหนดความกว้างของ table

<table width="500px"> </table>

ความสูง ใช้คำสั่ง heigth=”..” หน่วยจะเป็น px หรือ % ก็ได้แล้วแต่ความต้องการของเรา ความสูงนี้เราสามารถกำหนด
ความสูงของตาราง ความสูงของแถว หรือความสูงของเซล ได้ด้วย วิธีใช้ กำหนดความสูงของ table

 <table width="500px" height="200px"> </table>

ขนาดของเส้นขอบ ใช้คำสั่ง border=”..” เส้นขอบนี้เราสามารถกำหนด
ความขนาดของ เส้นขอบของtable เส้นขอบของ
เส้นขอบของ ได้ด้วย วิธีใช้ กำหนด ขนาดของเส้นขอบ

 <table width="500px" height="200px" border="1"> </table>

นอกจากจะกำหนดขนาดได้แล้วเรายังสามารถ CSS กำหนด ลักษณะของเส้นขอบได้อีกด้วย

cellpadding ระยะห่างระหว่าง ตัวอักษรกับเซล์

cellspacing คือระยะหว่างระหว่าง เซล์กับ table

นอกจากนี้แล้ว เรายังสามารถใช้ Css ในการตกแต่งตารางให้สวยงามได้อีก ดังบทความนี้ครับ design table+css

<<< google Plus (กูเกิ้ล พลัส)ซัดที่นี่


Related Posts

คุณอาจจะสนใจ บทความต่อไปนี้(มั้ง)

  สามารถนำบทความไปเผยแพร่ต่อได้ แต่ต้องทำ ลิงค์กับมาที่บทความนั้นๆด้วยนะครับ หากไม่ทำตามจะมีความผิดทางกฏหมายตาม พรบ. เกี่ยวกับลิขสิทธิ์ นะครับ


4 Comments »

  • มุมิด said:

    วันนี้เพื่อเรียนเรื่องดีเลย พอมาอ่านอีกรอบจากที่นี้ ยิ่งเข้าใจใหญ่เลย

    Reply to this commentตอบกลับความเห็นนี้
    - 30 มกราคม 2011 at 11:36 am
  • inkink said:

    hello

    Reply to this commentตอบกลับความเห็นนี้
    - 24 กุมภาพันธ์ 2011 at 12:09 pm
  • kilomet said:

          ผมก็เขียนแบบนี้ ยาวไปด้วยจริง บ้างครั้งเขียนแบบนี้เป็นบรรทัดเลย

    Reply to this commentตอบกลับความเห็นนี้
    - 13 มีนาคม 2011 at 12:27 pm
  • นิดหน่อย said:

    ขอบคุณสำหรับความรู้ดีๆแบบนี้นะครับ

    Reply to this commentตอบกลับความเห็นนี้
    - 28 สิงหาคม 2011 at 10:16 pm

Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can add images to your comment by clicking here.