Please enable JavaScript.
Coggle requires JavaScript to display documents.
การสร้างตาราง - Coggle Diagram
การสร้างตาราง
- การกำหนดขนาดของเซลล์ตาราง
การตกแต่งตาราง สามารถปรับแต่งในส่วนของเซลล์ได้โดยตรง ด้วยการกำหนดความสูง
ความกว้างเซลล์ได้ ด้วยแท็ก <Th>…</Th> หรือ <Td>…</Td>
-
ข้อควรระวัง
การกำหนดขนาดเซลล์ในตาราง สามารถกำหนดได้ทั้งแท็ก <TH>…</TH> และ<TD>…</TD>ที่ต่างกันที่เซลล์นั้น ๆ เป็นข้อความปกติ หรือหัวข้อเรื่องในตารางเท่านั้น
การกำหนดขนาดเซลล์ในตารางควรใช้ กับการกำหนดความสูงของเซลล์เท่านั้น
(สามารถกำหนดเพียงเซลล์เดียว แต่มีผลกับเซลล์อื่นในบรรทัดเดียวกันได้)) เพราะหากกำหนดความ
กว้างของเซลล์เพียงแค่เซลล์ใดเซลล์หนึ่ง จะส่งผลให้ช่องในแนวคอลัมน์เดียวกันมีขนาดไม่เท่ากัน
หรือต้องระบุความกว้างของทุกเซลล์ทำให้เสียเวลาควรใช้แท็ก <Colgroup>แทน
การกำหนดความสูงของเซลล์ในตาราง ในแต่ละบรรทัดควรพิจารณาให้เหมาะสมกับ
ความสูงของภาพรวมของตาราง ไม่ควรกำหนดให้มีค่าขัดแย้งกัน
ข้อคิด
-
การกำหนดความกว้างจะกำหนด ให้เสร็จสิ้นทีละช่องหรือทีละชุด แล้วจึงกำหนดใน
คอลัมน์ที่อยู่ถัดไปเรื่อย ๆ
ในกรณีทีกำหนดเป็นชุด จะกำหนดความกว้างเป็นความกว้างของแต่ละคอลัมน์ ไม่ใช่
ความกว้างของทั้งชุดคอลัมน์และจะมีผลให้แต่ละคอลัมน์มีขนาดเท่ากัน
การตกแต่งตารางที่เกี่ยวกับเส้นขอบตารางสามารถกำหนดได้ตามความต้องการของผู้ใช้
เพื่อความสวยงามสามารถตกแต่งไดห้ลากหลายลกัษณะเช่น การกำหนดขนาดเส้นขอบตารางการ
กำหนดสีเส้นขอบตารางและการกำหนดรูปของของเส้นขอบตาราง
-
ข้อคิด
การกำหนดสีเส้นขอบตาราง ต้องใช้ควบคู่กับการกำหนดขนาดเส้นขอบเสมอ แต่การ
กำหนดเส้นขอบแล้วจะกำหนดสีเส้นหรือไม่ก็ได้
เส้นขอบภายนอกตาราง
เส้นขอบภายนอกตารางสามารถกำหนดรูปแบบในการแสดงได้จะต้องควบคู่กับการใช้
คำสั่งกำหนดขนาดเส้นขอบตารางด้วยนนั่ คือจะตอ้งไม่กำ หนดขนาดเส้นขอบเป็น 0 มีรูปแบบใน
การจัดได้ 9 แบบ
ข้อคิด
การกำหนดเส้นขอบภายนอกตาราง หากไม่กำหนดโปรแกรมจะแสดงผลเป็นแบบ
Border และ Box คือมีเส้นขอบทั้งสี่ด้านเหมือนการกำหนดเส้นขอบตามปกติและต้องควบคู่กับการ
กำหนดขนาดเส้นขอบเสมอ
ข้อสังเกต
การกำหนดเส้นขอบภายในตารางด้านนอกหากไม่กำหนดโปรแกรมจะแสดงผลเป็น
แบบ All คือมีเส้นขอบภายในทั้งสี่ด้านเหมือนการกำหนดขนาดเส้นขอบตามปกติ และต้องควบคู่
กับการกำหนดขนาดเส้นขอบเสมอ
การตกแต่งตาราง สามารถปรับแต่งในเรื่องของความกว้างและความสูงของตารางได้โดย
กำหนดค่าเป็นเปอร์เซ็นต์หรือพิเซลได้ตามความต้องการ
ข้อควรระวัง
การกำหนดขนาดของตารางให้ระวังการกำหนดความสูงของตารางเนื่องจากความสูง
จะสัมพันธ์กับจำนวนบรรทัดของข้อมูล ไม่จำเป็นจะต้องจัดความสูงของตารางก็ได้หรือถ้ากำหนด
ต้องระวังให้มีความสูงเหมาะสมกับจำนวนบรรทัดของข้อมูลด้วย
การกำหนดความสูงและความกว้างเป็นเปอร์เซ็นต์ขึ้นอยู่กับความกว้างของจอภาพด้วย
เนื่องจากกำหนดขนาดเทียบเทียบกับขนาดของจอภาพนั่นเอง
1.การสร้างตาราง
การสร้างตารางสามารถกeหนดไดด้วยแท็ก<Table>…</Table> เป็นการทำขอบเขตของตาราง ซึ่งจะต้องประกอบด้วยส่วนที่เป็นแถว ที่กำหนดด้วยแท็ก<Tr>…</Tr> และในส่วนของซลล์ (Cell) กำหนดด้วยแท็ก <Td>…</Td> โดยลกัษณะภาพรวมดังนี้
- การกำหนดขนาดตาราง ด้วยแท็ก<Table Width Height>…</Table> เพื่อกา หนดค่า
ความกว้างและความสูงของตาราง
- การกำหนดขนาดของเซลล์ตารางด้วยแท็ก <Colgroup>…</Colgroup> เพื่อกำหนด
ความกวา้งของแต่ละคอลมั น์ของตารางเพื่อใหม้ีขนาดที่เหมาะสมตามความต้องการ
- การจัดวางตำแหน่งของตาราง ด้วยแท็ก <Table Align>…</Table> เพื่อกำหนดการ
จัดวางตำแหน่งของตารางให้ชิดด้านซ้ายจัดกึ่งกลางและด้านขวาของเอกสาร
- การกำหนดระยะห่างระหวา่งเส้นขอบกบัข้อมูลในตาราง ด้วยแทก็ <Table
Cellpadding>…</Table> เพื่อให้เกิดระยะห่างระหวา่งเส้นขอบตารางกับข้อมูลที่ปรากฎในตาราง
- การกำหนดระยะห่างระหวา่งช่องในตารางด้วยแท็ก<Table Cellspacing>…<Table>
เพื่อกำหนดระยะห่างระหว่างช่องในตาราง ทำให้เส้นตารางมีความกวา้งและแคบลงตามค่าที่
กำหนด
- การแทรกรูปภาพในตาราง ด้วยแท็ก <Img Src> ในช่องเซลลข์อ้มูลในตาราง