html: สิงหาคม 2012

การแทรกตาราง

การแทรกตาราง

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

1.เซลล์ (cell)

2. แถว (row)

3.คอลัมน์ (column)

Tag ที่เกี่ยวข้องกับตารางมี ดังนี้
<TABLE>...</TABLE> เป็นการบอกจุดเริ่มต้นและจุดสิ้นสุดของตาราง
<TR>...</TR> เป็นการบอกจำนวนแถว (row)
<TD>...</TD> เป็นการบอกจำนวนคอลัมน์ (column)

การใส่ขนาดขอบของตาราง
กำหนดความหนาของขอบตารางด้วยหน่วยของ Pixel โดยมีรูปแบบ ดังนี้
BORDER = "ตัวเลขบอกขนาด" (อยู่ใน Tag ของ TABLE)

ตัวอย่างเช่น : <TABLE BORDER = 1>
<TR>
<TD>แถว 1 คอลัมน์ 1</TD>
<TD>แถว 1 คอลัมน์ 2</TD>
</TR>
<TR>
<TD>แถว 2 คอลัมน์ 1</TD>
<TD>แถว 2 คอลัมน์ 2</TD>
</TR>
</TABLE>

โค้ด

ผลลัพธ์

การใส่สีเส้นขอบของตาราง
การกำหนดสีของเส้นขอบของตาราง โดยใช้รูปแบบการกำหนดชื่อสีหรือการกำหนดแบบรหัสสีเป็นแบบค่าตัวเลขฐานสิบหก โดยมีรูปแบบดังนี้
1. BORDERCOLOR = "ชื่อสีที่ต้องการ" (อยู่ใน Tag ของ TABLE)
2. BORDERCOLOR = "#รหัสเลขฐานสิบหก" (อยู่ใน Tag ของ TABLE)

ตัวอย่างเช่น : <TABLE BORDER = 1 BORDERCOLOR = "BLUE">

โค้ด

ผลลัพธ์

ตัวอย่างเช่น : <TABLE BORDER = 1 BORDERCOLOR = "#00FF7F">

โค้ด

ผลลัพธ์

การปรับขนาดความกว้าง(WIDTH)และความสูง(HEIGHT)
การกำหนดความกว้างและความสูงให้กับตาราง WIDTH และ HEIGHT ในแท็ก <TABLE> ซึ่งสามารถกำหนดได้ 2 รูปแบบดังนี้
1.กำหนดเป็นเปอร์เซ็น ซึ่งปรับขนาดตารางตามขนาดหน้าจอของเบราว์เซอร์
รูปแบบโค้ด : <TABLE WIDTH="ระบุขนาดตัวเลข%" HEIGHT="ระบุขนาดตัวเลข%">

2.กำหนดความกว้าง และความยาวเป็นจุด(PIXEL) ซึ่งขนาดตารางจะไม่ปรับตามขนาดหน้าจอของเบราว์เซอร์วิธีนี้จะไม่ทำให้ตารางและข้อมูลในตารางขยับเปลี่ยนตำแหน่ง
รูปแบบโค้ด : <TABLE WIDTH="ระบุตัวเลข" HEIGHT="ระบุตัวเลข">

ตัวอย่างเช่น : <TABLE BORDER = 1 WIDTH = 600>

โค้ด

ผลลัพธ์

ตัวอย่างเช่น : <TABLE BORDER = 1 HEIGHT= 400>

โค้ด

ผลลัพธ์

การจัดตำแหน่งตาราง(ALIGN)
  ข้อมูลในตารางแต่ละช่องสามารถจัดตำแหน่งให้อยู่ ชิดซ้าย ชิดขวา และกึ่งกลางได้
โดยการใช้ ALIGN="ตำแหน่งของข้อมูล" ตำแหน่งของข้อมูลมี ดังนี้
                    "CENTER" หมายถึง อยู่ตรงกลางเซลล์
  "LEFT"       หมายถึง อยู่ชิดด้านซ้ายเซลล์
                    "RIGHT"    หมายถึง อยู่ชิดด้านขวาเซลล์

การจัดตำแหน่งแบบกึ่งกลาง
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "CENTER">

โค้ด

ผลลัพธ์

การจัดตำแหน่งแบบชิดซ้าย
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "LEFT">

โค้ด

ผลลัพธ์

การจัดตำแหน่งแบบชิดขวา
ตัวอย่างเช่น : <TABLE BORDER = 1 Align = "RIGHT">

โค้ด

ผลลัพธ์

การรวมเซลล์
เป็นการผสานเซลล์ตั้ง 2 เซลล์ขึ้นไป การรวมเซลล์มี 2 ลักษณะ คือ การรวมคอลัมน์(COLUMN) และการรวมแถว(ROW)

1.การรวมคอลัมน์

เป็นการรวมเซลล์ตามแนวนอนตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง COLSPAN
กำหน ดไว้ในคำสั่ง <TD>

รูปแบบ : <TD COLSPAN = " จำนวนคอลัมน์ที่รวม " >ข้อความ</TD>

ตัวอย่างเช่น : <TD COLSPAN = 2 >รวมคอลมน์</TD>

โค้ด

ผลลัพธ์

2.การรวมแถว

เป็นการรวมเซลล์ตามแนวตั้ง ตั้งแต่ 2 เซลล์ขึ้นไป เป็นเซลล์เดียวกัน โดยใช้คำสั่ง ROWSPAN กำหนดไว้ในคำสั่ง <TD> เหมือนการรวมคอลัมน์
รูปแบบ : <TD ROWSPAN ="จำนวนแถวที่รวม"> ข้อความ </TD>

ตัวอย่างเช่น : <TD ROWSPAN = 2 >JaMaGaTaRo</TD>

โค้ด

ผลลัพธ์

ที่มา : http://school.obec.go.th/pp_school/html/table.html
  http://www.kty.ac.th/html/unit5/unit503.html
  http://www.thainextstep.com/html/html_09.php
  http://www.yupparaj.ac.th/CAI/color/colorcode.html

วันที่ 2 กันยายน 2555 (:

การแทรกรูปภาพ HTML

การแทรกภาพ (Image) : ภาพที่จะใช้แสดงในเว็บเพจ นิยมใช้ภาพที่มีชื่อสกุลของภาพเป็น .JPG หรือ .GIF เพราะเป็นไฟล์ภาพที่มีขนาดเล็ก สามารถแสดงผลได้รวดเร็ว

ในกรณีที่ไฟล์รูปภาพอยู่ที่เดียวกับเว็บเพจ

Code : <IMG SRC = "ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">

ตัวอย่างเช่น

โค้ด

ผลลัพท์

ในกรณีที่ไฟล์รูปภาพอยู่คนละที่กับเว็บเพจ

Code : <IMG SRC ="ชื่อไฟล์ที่รูปอยู่ / ชื่อไฟล์รูปภาพ . นามสกุลไฟล์รูปภาพ">

ตัวอย่างเช่น

โค้ด

ผลลัพท์

การปรับขนาดรูปภาพ : ในการแทรกภาพเข้าสู่เอกสาร html นั้นขนาดของภาพอาจไม่ตรงตามที่เราต้องการ ซึ่ง html มีคำสั่งสำหรับปรับขนาดภาพโดยนำ width(ความกว้าง)="ขนาดที่ต้องการ" height(ความสูง)="ขนาดที่ต้องการ" ไปต่อท้ายชื่อภาพภายในคำสั่งแสดงภาพ แล้วปรับขนาดภาพตามต้องการ

Code : <IMG SRC ="ชื่อไฟล์รูปภาพ.นามสกุลไฟล์รูปภาพ" Width =(ขนาดความกว้าง)
Height=(ขนาดความสูง)>

ตัวอย่างเช่น