Easyhome 2010
KruMontree.com
Basic HTML Navigation Bar

 

Basic HTML Menu
What is HTML?
Basic HTML files
Text & Background Color
Images
Table
Link
Set Thai
Stylesheet

 

 
ADS 250x250
 
ADS_250

HTML Header
Nekoการจัดหน้าตาเอกสารด้วยตาราง

บางครั้ง การจัดหน้าตาเอกสารมักจะประสบปัญหาในเรื่องการวางตำแหน่งของข้อความ หรือรูปภาพไม่เป็นไปตามที่เราต้องการ การใช้ตารางเข้าช่วยจะทำให้เราจัดได้ตามใจมากกว่า

  • <TABLE> - - - - </TABLE> เป็น Tag กำหนดการแสดงผลตาราง ใน tag <TABLE> สามารถกำหนดขนาดความกว้าง สูงของตาราง กำหนดให้มีขอบและแสดงเส้นขอบของ ตารางได้
  • <TR> - - - - </TR> เป็น Tag กำหนดแถว ซึ่งใน Tag นี้เราสามารถแทรก Tagของจำนวน คอลัมน์ลงไปได้
  • <TD> - - - - </TD> เป็น Tag กำหนดจำนวนคอลัมน์
  • <TH> - - - - </TH> เป็น Tag กำหนดคอลัมน์ที่แสดงผลในส่วนหัวของตาราง (ซึ่งมักจะจัด อักษรแบบกึ่งกลางและตัวหนา)
  • ปกติตารางในแต่ละช่องจะมีขนาดพอดีกับตัวอักษรที่บรรจุอยู่ภายใน หรือรูปภาพ แต่เรา สามารถกำหนดเป็นอย่างอื่นได้ แต่ทั้งนี้จะต้องกำหนดความกว้างสูงสุดของตารางไว้ไม่ให้ เกิน 100% เพื่อไม่ให้ล้นจอ
  • รูปแบบพื้นฐานของคำสั่งตาราง
<TABLE>
      <TR> <TH>
  หัวตารางคอลัมน์ที่ 1   </TH> <TH>   หัวตารางคอลัมน์ที่ 2   </TH> </TR>
      <TR> <TD>
    แถวที่ 1 ข้อมูล 1    </TD> <TD>     แถวที่ 1 ข้อมูล 2    </TD> </TR>
      <TR> <TD>
    แถวที่ 2 ข้อมูล 1    </TD> <TD>     แถวที่ 2 ข้อมูล 2     </TD> </TR>
</TABLE>
  • ส่วนขยายของคำสั่งตาราง (Attribute) เพื่อให้แสดงผลตามที่เราต้องการมีหลายคำสั่งดังนี้
    • border="x" สำหรับการกำหนดความหนาของเส้นขอบโดยแทนที่ค่า x ด้วยตัวเลข ค่าปกติคือ 0
    • width="x%" สำหรับกำหนดความกว้างของตารางมีหน่วยเป็นเปอร์เซนต์ของหน้าจอ นั้นๆ แต่ไม่เกิน 100%
    • bgcolor="ค่าสี" สำหรับกำหนดสีพื้นในตาราง
      ถ้าใส่ค่านี้ใน tag
      <table bgcolor="ค่าสี "> จะมีผลกับตารางทุกแถวทุกช่อง
      ถ้าใส่ค่านี้ใน tag <tr bgcolor="ค่าสี "> จะมีผลกับตารางในแถวนั้นทุกช่อง
      ถ้าใส่ค่านี้ใน tag <td bgcolor="ค่าสี "> จะมีผลเฉพาะกับช่องตารางนั้นช่องเดียว
    • colspan="x" การขยายช่องตารางโดยการรวมคอลัมน์ ระบุจำนวนคอลัมน์ที่ต้องการ รวมเข้าด้วยกัน
    • rowspan="x" การขยายช่องตารางโดยการรวมแถว ระบุจำนวนแถวที่ต้องการรวมเข้า ด้วยกัน
    • align="left,center,right" การจัดตำแหน่งของภาพ/อักษรภายในช่องตาราง <td> ค่าปกติคือ left
      ตัวอย่างของการใช้คำสั่งส่วนขยายของตาราง

<TABLE border="2" width="90%">
      <TR bgcolor="#FFFF00">
            <TD colspan="3" align="center">
ช่องนี้ขยาย 3 คอลัมน์ จัดกึ่งกลาง</TD>
      </TR>

      <TR>
            <TD rowspan="2" align="center">
รูปกบเดินขยายลง 2 แถว</TD>
            <TD>
ช่องที่ 5 จัดชิดซ้าย </TD> <TD>ช่องที่ 6 จัดชิดซ้าย</TD>
      </TR>

      <TR>
            <TD align="center">
ช่องที่ 8 จัดกึ่งกลาง </TD> <TD align="right">ช่องที่ 9 จัดชิดขวา</TD>
      </TR>

</TABLE>

ตัวอย่างจากคำสั่งข้างบน

ช่องนี้ขยาย 3 คอลัมน์
กบเคโระ ช่องที่ 5 ช่องที่ 6
ช่องที่ 8 ช่องที่ 9

คุณต้องศึกษารายละเอียดเพิ่มเติมจากตำราอีกทีนะครับ มีแนะนำไว้แล้ว
ในหัวข้อ "เอกสารอ้างอิงและตำรา"

Top

 

red line
Home | What's new? | Basic HTML | Reviews Programs | Tip&Tricks | Download | Site Map
red line

 

Home Basic HTML Review Software More Tip & Tricks Download Software Site Map