วันเสาร์, ธันวาคม 5

5-7 การสร้างตาราง

สวัสดีครับ
ในหัวข้อนี้จะเป็นหัวข้อเกี่ยวกับการสร้างตาราง ซึ่งตารางก็เป็นก็เป็นตัวหนึ่งที่ถูกนิยมนำมาใช้ในเว็บไซต์เป็นจำนวนมาก ไม่ว่าจะเป็นการใส่ข้อมูลงลงในตารางหรือแม้
แต่การนำตารางไปช่วยในการจัดวาง Layout ของเนื้อหา ซึ่งนักศึกษาควรทำความเข้าใจและฝึกปฏิบัติให้เป็นนะครับ
ซึ่งใน หัวข้อการสร้างตารางนะครับ
สิ่งที่เราจะเรียนรู้ก็คือ การสร้างแถว สร้างคอลัมน์นะครับ
แล้วก็การรวมแถว รวมคอลัมน์รวมถึงการปรับ
แต่งตารางสามารถทำได้อย่างไงบ้าง
ถ้านักศึกษาพร้อมแล้วเข้าไปในโปรแแกรมNetBeansกันได้เลยนะครับ
ในการสร้างตารางนะครับ
เราจะใช้<table>มาช่วยในการสร้าง นักศึกษาก็พิมพ์<table>ลงไปซึ่ง <table เราสามารถกำหนดรายละเอียดเข้าไปได้ ว่าต้องการในตารางเรามีเส้นขอบขนาดเท่าไหร่ สมมุติอาจารย์ตั้งเป็น border="1" นะครับ
ซึ่ง<table>เป็นแท็กคู่ ก็คือจะมีจุดเริ่มต้นและจุดสิ้นสุด
ดังนั้นในการสร้างเเถวและคอลัมน์ เราก็จะใส่ภายใต้<table>ตัวนี้ การสร้างแถวเราจะใช้<tr>เข้ามาช่วยในการสร้างแถวนะครับ
หนึ่งคู่ก็คือ หนึ่งแถว
ดังนั้น
ถ้าเราต้องการสร้างสี่เเถวเราก็ใส่แท็กตัวนี้สี่คู่นี่คือการสร้างแถวนะครับ

ดังนั้น
ถ้าเราต้องการสร้างสี่เเถวเราก็ใส่แท็กตัวนี้สี่คู่นี่คือการสร้างแถวนะครับ
คราวนี้มาถึงการสร้างคอลัมน์บ้างในหนึ่งแถวเราต้องมีการกำหนดคอลัมน์ให้มีกี่คอลัมน์ ซึ่งโดยส่วนมากแล้วมาก
ถ้าเป็นตัวแถวแรกนะครับ

ถ้าเราจะสร้างตัวคอลัมน์แล้วส่วนมากเราจะใช้<th> ในการทำงานซึ่งเป็นการระบุว่าคอลัมน์นี้เป็นหัวข้อนะครับ
อันนี้คือการสร้างคอลัมน์ที่เป็นแถวแรก เป็นหัวคอลัมน์เราใช้<th>ในการทำงาน

แต่…

ถ้าเป็นแถวอื่นๆแถวธรรมดาเราจะใช้<td>ในการสร้างคอลัมน์ พอเราระบุแถวกับคอลัมน์เรียบร้อยแล้วนะครับ
นักศึกษาก็ลองรันโปรมแกรม ก็จะได้ตารางขึ้นมานะครับ
มีขนาดแถวและคอลัมน์ตามจำนวนที่เราสร้างมาเมื่อกี้นะครับ
ต้องการปรับ
แต่งตัวตารางเราต้องอ้างอิงที่แท็กของมันเลยก็คือ table อาจารย์ต้องการให้ table มีความกว้างเป็น 50 เปอร์เซ็นเอาสัก 30เปอร์เซ็นของหน้าจอนะครับ
แล้วมีสีพื้นเป็น Background-color เป็นสีชมพูนะครับ
จากนั้นลองรันโปรแกรม เราก็จะได้ตารางที่มีความกว้าง 30 เปอร์เซ็นของหน้าจอแล้วก็มีสีพื้นเป็นสีชมพูนะคัรบ
ดังนั้น
ถ้าต้องการปรับ
แต่งในส่วนอื่นๆนะครับ
เช่นเราต้องการปรับ
แต่งในตัว ความกว้างของคอลัมน์นะครับ
เราก็ระบุที่ td นะครับ
ก็คือตัวคอลัมน์ต้องการระบุความกว้าง สมุติอาจารย์เอากว้างเป็น 100px; แล้วก็แถว อาจารย์ต้องการให้สูง 50px; ก็จะได้ตามที่เราระบุค่าลงไปนะครับ
เราอาจจะมีการmergeหรือรวมกันเข้าไปเราก็สามารถเขียนขึ้นมาได้เช่นกัน อันนี้คือการสร้างตารางแถวคอลัมน์แล้วก็การปรับ
แต่งนะครับ
คราวนี้เวลาเราสร้างตารางขึ้นมาแล้วในบ้างแถวนะครับ
หรือบ้างคอลัมน์ เราอาจจะมีการmergeหรือรวมกันเข้าไปเราก็สามารถเขียนขึ้นมาได้เช่นกัน ยก
ตัวอย่างเช่นอาจารย์ต้องการเอาแถวที่ 3 นะครับ
กับเเถวที่ 4 รวมกันนะครับ
เราก็จะไปเขียนคำสั่งในการรวมตัวแถวเข้ามานะครับ
ในการเขียนคำสั่งรวมแถวนะครับ
เราก็จะไปเขียนในตัวแถวที่เราต้องการรวมนะครับ
โดยเราเขียนอยู่ในแท็ก td นะครับ
rowspan ก็คือการรวมแถวแล้วเราก็ระบุค่าลงไปว่าเราต้องการรวมกี่แถวนะครับ
ในที่นี่คือ 2 แถวจากนั้นลองรันโปรแกรม
ดังนั้นเวลาเรารวมแถวเข้าไปแล้วนะครับ
จะมีคอลัมน์เกินขึ้นมาซึ่งโดยปกติแล้วเวลาเรารวมแถวนะครับ
เราจะว่าสังเกตที่แถวที่ 4 นะครับ
คอลัมน์ A4 ไม่ควรมีอยู่แล้วเพราะเรารวมแถวที่ 3 กับ 4ไปแล้วนะครับ

ดังนั้นเราก็ต้องมาตัดตัวคอลัมน์ A4 ออกไปนะครับ
จากนั้นลองรันโปรมแกรมดูเราก็จะเห็นว่ายังเท่าเดิมนะครับ
ก็คือมี 4 คอลัมน์แล้วตอนนี้ แถวที่ 3 กับแถวที่ 4 ของคอลัมน์ที่ 1 ถูกรวมเข้าหากันแล้วนะครับ

ดังนั้นเราก็สามารถรวมแถวที่เราสร้างตารางขึ้นมาได้นะครับ
ว่าต้องการให้แถวไหนถูกรวมเข้าหากันบ้าง อันนี้คือการรวมแถวเข้าด้วยกันนะครับ
นอกจากการรวมแถวแล้ว เรายังสามารถรวมคอลัมน์ที่เราต้องการเข้าหากันได้อีกด้วยนะครับ
โดยอาศัยคำสั่ง colspan นะครับ
เข้ามาช่วยในการทำงาน ในการรวมคอลัมน์นะครับ
เราก็ไปที่คอลัมน์ที่เราต้องการรวมนะครับ
ในที่นี้อาจารย์ต้องการรวมคอลัมน์ ที่ 3 กับ 4 เข้าด้วยกัน อาจารย์ก็ใส่คำสั่ง colspan ลงไปนะครับ
ต้องการรวม 2 คอลัมน์ ก็ใส่เลข 2 ลงไปนะครับ
จากนั้นลองรันโปรมแกรม ก็จะเห็นว่า คล้ายกับรวมแถวเมื่อกี้นะครับ
จะมีตัวคอลัมน์หรือแถวที่เกินมานะครับ
ในที่นี้เรารวมคอลัมน์ที่ 3 กับ 4 เราก็จะไปลบตัวคอลัมน์ที่เกินมาทิ้งไปนะครับ
แล้วก็ลองรันโปรแกรมดูอีกครั้ง นักศึกษาก็จะเห็นว่าคอลัมนื 3 4 ถูกรวมเข้าหากันแล้วนะครับ
อันนี้คือคำสั่งที่ใช้ในการรวมคอลัมน์นะครับ
ซึ่งละลักษณะของ
แต่ละคอลัมน์
แต่ละแถวนะครับ
เราก็สมารถที่จะจัดรูปแบบของมันได้นะครับ
ยก
ตัวอย่างเช่น อาจารยืต้องการเปลี่ยนสีพื้นของ ตัว C2 นะครับ
อาจารย์ก็จะไปใส่คำสั่ง CSS เข้ามานะครับ
ต้องการเปลี่ยนแค่จุดเดียว เราก็ใส่เป็น Cell2 นะครับ
ต้องการเปลี่ยนสีต้องใช้ Backcolor เหมือนเดิมนะครับ
สมุติว่าเป็น gray จากนั้นนะครับ
เราก็ไปเรียกใช้การปรับ
แต่ง Cell ที่ตัว c2 นะครับ
ก็คือ cell จากนั้นก็ลองรันโปรมแกรม ก็จะเห็นว่าเราก็สามารถปรับ
แต่งบ้าง cell55
00:09:23,060 –> 00:09:34,740
จากนั้นก็ลองรันโปรแกรม ก็จะเห็นว่าเราก็สามารถปรับ
แต่งบ้าง sale ในตารางเราได้เช่นกัน โดยอาศัยคำสั่ง CSS เข้ามาช่วย เหมือนเดิมในการปรับ
แต่งนะครับ
เพียง
แต่ว่า
ถ้าต้องการปรับ
แต่งแฉพาะบ้างจุดเราก็จะสร้างเป็นCell หรือเป็น id ขึ้นมาเอาไว้สำหรับการใช้งานนะครับ
เป็นอย่างไงกันบ้างครับ
รู้จักคำสั่งที่ใช้ในการสร้างตารางกันแล้วใช่มั้ยครับ
ในหัวข้อถัดไปนะครับ
จะเป็นการอาศัยตารางที่เราสร้างขึ้นมาเพื่อจะ Layout ของเนื้อหานะครับ
จะเห็นว่าเราสามารถใช้คำสั่ง Css เข้ามาช่วยในการจัด Layout ก็ได้ หรือเราจะอาศัยตารางเข้ามาช่วยในการจัด Layout ได้เหมือนกัน ซึ่งนักศึกษาจะได้เรียนรู้ในหัวข้อถัดไปนะครับ

ถ้านักศึกษาพร้อมแล้วคลิ้กที่หัวข้อถัดไปได้เลยนะครับ

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *