ตาราง HTML สามารถสั่งให้รวมคอลัมน์ หรือแถว เพื่อจัดรูปแบบตารางที่จะแสดงบนหน้าเว็บไซต์ได้ HTML Table – Colspan หากต้องหารรวมหลายๆ คอลัมน์เข้าด้วยกันให้ใช้ attribute: colspan Note: จากตัวอย่าง colspan = 2 หมายถึงจำนวนคอลัมน์ที่จะรวม ดังนั้นในตัวอย่าง colspan = 2 จะเป็นการรวม 2 คอลัมน์ HTML Table – Rowspan ถ้าต้องการรวมแถวหลายๆ แถวเข้าด้วยกันในตารางให้ใช้คำสั่ง attribute: rowspan Note: จากตัวอย่าง rowspan = 2 หมายถึงจำนวนแถวที่จะรวม ดังนั้นในตัวอย่าง rowspan = 2 จะเป็นการรวม 2 แถว
HTML Table Padding & Spacing
HTML สามารถจัดการช่องหว่างภายในตารางแต่ช่อง และช่องว่างระหว่างเซลล์ตามที่ต้องการได้ HTML Table – Cell Padding ช่องว่างของเซลล์ (Cell padding) จะเป็นช่องหว่างระหว่างขอบเซลล์ (Cell edges) และเนื้อหาของเซลล์ (Cell content) โดยจะมีค่าเริ่มต้นคือ 0 ซึ่งหากต้องการกำหนดขนาดช่องว่างภายในเซลล์ของตาราง จะกำหนดในส่วนของ property CSS-padding หากต้องการใส่ช่องว่างเหนือข้อความเท่านั้นให้ใช้ property: padding-top หรือหากเป็นด้านอื่น ก็จะใช้ property: padding-bottom (ด้านล่างข้อความ), padding-left (ด้านซ้าย), และ padding-right (ด้านขวา) HTML Table – Cell Spacing Cell spacing (ช่องว่างระหว่างเซลล์) เป็นช่องว่างระหว่างเซลล์แต่ละเซลล์ โดยจะมีค่าเริ่มต้นอยู่ที่ 2 pixels หากต้องการเปลี่ยนระยะห่างระหว่างเซลลืของตาราง จะใช้ property CSS: […]
HTML Table Headers
ตาราง HTML สามารถมี header ของตาราง โดยสามาถใส่ได้ทั้งในแถวและคอลัมน์ตามต้องการได้ HTML Header นั้นจะใช้ element th แต่ละ th นั้นจะเป็นข้อความที่แสดงอยู่ในตารางแต่ละช่อง Table Headers แนวตั้ง หากต้องการให้คอลัมน์แรกของตารางเป็นส่วนหัว ให้ใส่ <th> ไว้ในแต่ละแถว การจัดวางตำแหน่งของ Table Headers ค่าเริ่มต้นของตาราง ปกติแล้วจะถูกตั้งค่าไว้ให้อยู่กึ่งกลางและตัวอักษรเป็นตัวหนา แต่หากต้องการให้ข้อความในส่วนของ Table Header อยู่ทางซ้าย ให้ใช้ property text-align Header ใช้หลายคอลัมน์ ในตารางข้อความใน Header อาจต้องใช้หลายคอลัมน์ ในกรณีนี้สามารถสร้างได้โดยใช้ colspan ใน element <th> Table Caption คุณสามารถใส่ชื่อตารางได้ โดยใช้คำสั่ง <caption> Note: <caption> […]
HTML Table Sizes
การสร้างตารางใน HTML สามารถกำหนดความสูง ความกว้างในแต่ละแถวและคอลัมน์ได้หรือจะทั้งตารางก็ได้ เช่นกัน ฌดยใช้คำสั่ง style จากนั้นให้ระบุความสูงและความกว้างโดยใช้คำสั่ง width หรือ height HTML Table Width การตั้งค่าความกว้างให้กับตาราง ให้ใส่ attribute style ลงในส่วนของ <table> Note: การระบุขนาดเป็นเปอร์เซนต์ จะเป็นการระบุความกว้างตามพื้นที่ที่ใช้งานอยู่ ซึ่งจากตัวอย่างนี้จะถูกระบุไว้ใน <body> HTML Table Column Width การตั้งค่าความกว้างของคอลัมน์ จะใส่โค้ <style> ลงใน element <th> หรือ <td> HTML Table Row Height สำหรับการตั้งค่าความสูงของแถว ให้ใส่ style ลงในส่วนของ <tr>
HTML Table Borders
สำหรับบนตาราง HTML สามารถสร้างขอบของตารางได้หลากหลายรูปแบบและรูปร่างต่างๆ ได้ตามต้องการ วิธีการเพิ่มเส้นขอบ เมื่อคุณเพิ่มเส้นขอบให้กับตาราง จะเป็นการเพิ่มเส้นขอบรอบๆ ในแต่ละ cell การเพิ่มเส้นขอบตารางจะใช้ property CSS border ใน elements table, th และ td ตัวอย่าง การสร้างเส้นขอบตาราง 1 เส้น จากตัวอย่างด้านบนจะเป็นการสร้างเส้นขอบตารางแบบ 2 เส้น แต่ถ้าอยากให้เหลือเส้นขอบตารางเพียงเส้นเดียว จะต้องใช้ property CSS border-collapse ตัวอย่าง เพิ่ม Style ให้กับเส้นขอบตาราง ในกรณีที่ต้องการใส่สีพื้นหลังให้แต่ละ cell ในตารางและให้เส้นขอบเป็นสีขาว ซึ่งเป็นสีเดียวกันกับพื้นหลังของเอกสาร ซึ่งในกรณีจะต้องตั้งค่าให้มองไม่เห็นเส้นขอบ ตัวอย่าง เส้นขอบตารางแบบมน ในกรณีที่ต้องการสร้างขอบตารางแบบมน ให้ใช้คำสั่ง border-radius ตัวอย่าง แต่ถ้าต้องการให้เส้นขอบนอกของตารางหายไป ดังรูป ตัวอย่าง เส้นตารางแบบจุด […]
HTML Tables
ใน HTML ผู้พัฒนาเว็บไซต์สามารถสร้างตาราง รวมไปถึงจัดการเกี่ยวข้อมูลที่อยู่ในตารางได้ ตัวอย่างตาราง Company Contact Country Nopar Daisy Atterberry America LalaNoodle Mu Shui China Rumi House Ami Sano Japan Farm Trad Pakpao Metharom Thailand Puca Trading Corporation Seo-Yeon Lee Korea Nifty Investment Co., Ltd. Baz Hart Australia สามารถเขียนโค้ด HTML ดังนี้ Table Cells แต่ละ cell ของตาราง จะใช้ tag <td> กับ </td> td คือ ข้อมูลของตาราง อะไรก็ตามที่อยู่ระหว่าง […]
HTML picture Element
element HTML <picture> เป็นการใส่รูปลงในหน้าเว็บไซต์ หรือหน้าเพจ ซึ่งจะช่วยในการแสดงผลของรูปภาพให้เหมาะกับการอุปกรณ์หรือขนาดหน้าจอ size ต่างๆ HTML <picture> Element element HTML <picture> จะช่วยให้ผู้พัฒนาเว็บไซต์สามารถทำงานจัดการกับรูปภาพได้อย่างง่ายดาย element <picture> จะประกอบไปดวย element <source> 1 element หรือมากกว่าก็ได้ แต่ละรายการจะอ้างอิงถึงรูปภาพต่างๆ โดยใช้ attribute srcset ด้วยเหตุนี้เองจึงทำให้เบราว์เซอร์สามารถเลือกรูปภาพที่เหมาะสมที่สุดในการแสดงผล ทั้งบนหน้าเว็บและบนอุปกรณ์ต่างๆ แต่ละ element ของ <source> จะมี attribute สำหรับ media ที่ช่วยเลือกว่าภาพใดควรจะแสดงผลแบบไหนถึงจะเหมาะสมที่สุด ตัวอย่าง แล้วเมื่อไหร่จะใช้ Element Picture เราจะใช้ element <picture> ใน 2 กรณี ดังนี้ ถ้าอุปกรณ์หรือหน้าจอของคุณมีขนาดเล็ก […]
HTML Background Images
รู้หรือไม่? คุณสามารถใส่ พื้นหลังหรือ Background ด้วย element ของ HTML ได้ด้วยนะคะ ใส่ภาพพื้นหลังด้วย HTML การเพิ่มภาพพื้นหลังใน HTML สามารถทำได้ โดยใส่ attribute style กับใช้ CSS property background-image สามารถระบุภาพพื้นหลังได้ด้วยการใส่ <style> ซึ่งอยู่ในส่วนของ <head> การสร้างภาพพื้นหลังในหน้าเพจ หากต้องการใส่พื้นหลังให้กับหน้าเพจทั้งหน้า ให้ใส่ background-image ลงในส่วน <body> Background Repeat ถ้าหากขนาดของภาพที่นำมาใช้เป็นพื้นหลังมีขนาดเล็กกว่าหน้าเพจหรือหน้าเว็บที่ใช้ ภาพพื้นหลังนั้นจะทำซ้ำๆ กันโดยอัตโนมัติ จะกว่าจะเต็มพื้นที่ของหน้าเพจหรือหน้าเว็บไซต์ ตัวอย่างโค้ด HTML ซึ่งหากไม่ต้องการให้ภาพซ้ำ ให้ไปตั้งค่าที่ property background-repeat ให้ใส่ no-repeat Background Cover ในกรณีที่ต้องการให้ภาพพื้นหลังครอบคลุมเต็มพื้นที่หน้าเว็บ สามารถทำได้โดยตั้งค่าที่ background-size […]
HTML Image Maps
รู้หรือไม่? HTML สามารถสร้างแผนที่ได้ด้วยนะ ด้วย tag <map> ของ HTML จะช่วยกำหนดพื้นที่ลิงก์ ทำให้รูปภาพรูปเดียวสามารถลิงก์ไปหลายหน้าได้ โดยใช้ tag <area> จากรูปด้านบนหมายถึงหากคลิกที่รูปแก้วกาแฟ จะลิงก์ไปยังหน้ากาแฟ เมื่อคลิกที่รูปสมุดจะลิงก์ไปยังหน้าสมุด และเมื่อคลิกที่ส้มจะลิงก์ไปที่หน้าส้ม การใช้งาน tag <map> แนวคิดของการใช้งาน tag <map> นี้จะเป็นการกำหนดพื้นที่ของภาพที่จะคลิก ว่าพื้นที่ของภาพส่วนใดคลิกไปหน้าใด โดยผู้พัฒนาจะเป็นผู้กำหนดในส่วนนี้ รูปแบบของโค้ดจะเป็นดังนี้ วิธีการใช้งาน Image map จากโค้ดตัวอย่างด้านบน จะเหมือนการใส่รูปภาพตามปกติ ซึ่งจะใช้ tag <img> แต่จะต่างกันตรงที่ต้องเพิ่ม attribute usemap เข้าไป การใส่ค่าใน usemap จะต้องขึ้นต้นด้วย “#” เสมอ แล้วตามด้วยชื่อที่คุณตั้ง อาจจะตั้งชื่อตามภาพก็ได้ เพื่อให้ง่ายต่อความเข้าใจ Tip: สำหรับ Image […]
HTML Images
ในการเขียนเว็บไซต์ด้วย HTML หากมีรูปภาพประกอบเข้าไปด้วย จะช่วยให้เว็บไซต์น่ามองและน่าดูมากยิ่งขึ้น ซึ่งใน HTML เอง ก็สามารถใส่รูปภาพ รวมไปถึงปรับเปลี่ยนขนาดและจัดวางตำแหน่งของรูปภาพได้ ตัวอย่างการใส่ภาพ HTML Images Syntax HTML จะใช้ tag <img> สำหรับใส่รูปภาพลงในเว็บไซต์ ซึ่งอันที่จริงแล้วรูปภาพไม่ได้ถูกใส่ลงเว็บไซต์ แต่จะใช้ tag <img> เป็นตัวเชื่อมโยงเพื่อให้รูปภาพถูกนำมาแสดงในหน้าเว็บไซต์เท่านั้น tag <img> เป็น tag เปล่า ภายในจะประกอบด้วย attributes เท่านั้น ซึ่งจะไม่มี tag ปิด สำหรับ tag <img> จะมี attributes ที่ใช้จำเป็นอยู่ 2 attributes รูปแบบการใช้งาน The src Attribute attributes scr จะใช้เพื่อระบุเส้นทางที่อยู่ (URL) […]
