วันจันทร์ที่ 27 สิงหาคม พ.ศ. 2555

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

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

สวัสดีเพื่อนๆ ชาวบล็อกเกอร์ทุกคนนะคร้าบ วันนี้ผมจะมาอัพเดตข้อมูลเกี่ยวกับแท็ก    HTML กันต่อนะครับ ในบทความนี้เรามาพูดถึงเรื่องการแทรกตารางกันดีกว่าครับ

  • การสร้างตาราง
จะใช้แท็ก <table>...</table> เพื่อสร้างตารางขึ้นมา โดยจัดเป็นแท็กคู่ 
<tr>...</tr> เพื่อแสดงว่าข้อมูลนั้นอยู่ในแถวเดียวกัน
และ <td>...</td> เพื่อแสดงว่าข้อมูลนั้นอยู่ในเซลล์หรือช่องเดียวกัน
สามารถแสดงได้ดังนี้



จากรูปจะเห็นว่าไม่มีตารางปรากฏขึ้นมา ไม่ได้หมายความว่าพิมพ์ผิดหรือตกแต่อย่างใด แต่ตารางนี้ไม่มีความหนา ดังนั้นจึงต้องเพิ่มความหนาให้ โดยการเติม border=x (เมื่อ x มีค่าความหนาตั้งแต่ 0 เป็นต้นไป ยิ่งเลขมาก ยิ่งหนามาก) ทำได้ดังนี้


แต่ถ้าเราอยากให้ให้เส้นขอบมีสีสันขึ้นมา ต้องเพิ่ม bordercolor="x" โดย x เป็นชื่อสี หรือโค้ดสี 6 หลัก ซึ่งการกำหนดสีแบบโค้ดจะให้สีที่ละเอียดกว่าการระบุชื่อสีไปเลย ดังนี้
 
 

 


  • การปรับแต่งตารางเบื้องต้น (เพิ่มที่แท็ก<table>)
align="x"  เพื่อการจัดตารางให้อยู่ทางด้านใดด้านหนึ่งของเว็บเพจ ถ้าจะให้อยู่ตรงกลาง ก็เปลี่ยน x เป็น right ถ้าจะให้อยู่ตรงกลาง ก็ให้เปลี่ยนเป็น center ทำได้ดังนี้


width=x แท็กนี้สามารถกำหนดความกว้างของตารางเป็น % หรือ ตัวเลข(มีหน่วยเป็นพิกเซล)


height=x โดยที่ x จะกำหนดความสูงของตารางนั้น สามารถกำหนดเป็น % หรือตัวเลข(หน่วยเป็นพิกเซล) เช่นเดียวกับความกว้าง ดังตัวอย่างต่อไปนี้


colspan=x ไว้ใช้กำหนดจำนวนคอลัมน์ที่อยากจะรวมเข้าด้วยกันเป็นเซลล์เดียว ดังแสดง



rowspan=x เมื่อต้องการจะรวมแถวเข้ากันเป็นเซลล์เดียว โดย x เป็นจำนวนที่ต้องการ ดังนี้



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

ลงวันที่ 27 ส.ค. 2555





ไม่มีความคิดเห็น:

แสดงความคิดเห็น