ตาราง 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 src จะใช้เพื่อระบุเส้นทางที่อยู่ (URL) […]
HTML Styles – CSS
CSS (Cascading Style Sheets) สำหรับ HTML จะใช้ในการตกแต่งเอกสารให้มีสีสัน ระยะห่าง พื้นหลัง เส้นขอบ และอื่นๆ ให้มีรูปแบบและหน้าตาตามที่ต้องการ ซึ่ง CSS จะช่วยประหยัดเวลาในการทำงาน เพราะเพียงแค่ออกแบบเพียงครั้งเดียวสามารถนำไปใช้ในหน้าเพจได้หลายๆ หน้าได้ CSS คืออะไร Cascading Style Sheets (CSS) ใช้จัดรูปแบบเค้าโครงของเว็บไซต์ ซึ่ง CSS จะใช้ในการจัดการรูปแบบสี, ตัวอักษร, ขนาดของข้อความ, ระยะห่างระหว่าง Elements, การจัดวางตำแหน่งและองค์ประกอบของ Elements, ภาพพื้นหลังหรือสีพื้นหลังที่ใช้, การแสดงผลบนอุปกรณ์ต่างๆ และอื่นๆอีกมากมาย Tip: คำว่า Cascading หมายถึง รูปแบบที่ใช้งานกับ Elements หลักซึ่งในที่นี้จะรวมไปถึง Elements ย่อยทั้งหมดที่อยู่ภายใต้ Elements หลักด้วย ซึ่งสมมติว่าคุณตั้งค่า body ของข้อความเป็น […]
HTML Comments
ใน HTML คำสั่ง Comments จะไม่แสดงบนหน้าเบราว์เซอร์ แต่โค้ด HTML จะเป็นการแทรกคำอธิบายหรือความคิดเห็น เพื่อบอกว่าโค้ดที่เขียนนั้นมีไว้ทำไม ทำงานอย่างไร เพื่อให้ผู้พัฒนา พัฒนาโปรแกรมต่อ หรือผู้เขียนเองจะได้ทราบภายหลังว่าโค้ดที่เขียนขึ้นมานั้นมีไว้ทำไม HTML Comment Tag คุณสามารถเพิ่มโค้ดลงใน HTML ได้ โดยให้พิมพ์ข้อความดังต่อไปนี้ จากโค้ดด้านบนสังเกตให้ดีจะเริ่มต้นด้วย ! แต่ไม่มี Tag ปิด หมายเหตุ: Comment จะไม่แสดงบนเบราว์เซอร์ แต่ใน HTML จะเป็นการอธิบายหรือข้อความเกี่ยวกับโค้ดนั้นๆ ว่ามีไว้ทำไม Add Comments Comments ที่มีอยู่ในโค้ด HTML จะเป็นการอธิบายหรือแจ้งให้ทราบถึงโค้ดที่มีอยู่ใน HTML ตัวอย่างการใช้งาน Hide Content นักพัฒนาสามารถซ่อนข้อความหรือเนื้อหาชั่วคราวได้ โดยใช้คำสั่ง Comments ตัวอย่างการซ่อนเนื้อหา หรือข้อความ ข้อความใดก็ตาม หากอยู่ภายใต้ Tag […]