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