บทช่วยสอนHTML

HTML หน้าแรก บทนำ HTML โปรแกรมแก้ไข HTML HTML พื้นฐาน องค์ประกอบ HTML แอตทริบิวต์ HTML ส่วนหัว HTML ย่อหน้า HTML รูปแบบ HTML การจัดรูปแบบ HTML ใบเสนอราคา HTML ความคิดเห็น HTML HTML สี HTML CSS ลิงค์ HTML รูปภาพ HTML HTML Favicon ตาราง HTML รายการ HTML บล็อก HTML & อินไลน์ คลาส HTML รหัส HTML HTML Iframes HTML JavaScript เส้นทางไฟล์ HTML หัวหน้า HTML เค้าโครง HTML HTML Responsive HTML รหัสคอมพิวเตอร์ HTML Semantics คู่มือสไตล์ HTML เอนทิตี HTML สัญลักษณ์ HTML HTML Emojis ชุดอักขระ HTML การเข้ารหัส URL HTML HTML กับ XHTML

แบบฟอร์มHTML

แบบฟอร์ม HTML คุณสมบัติแบบฟอร์ม HTML องค์ประกอบแบบฟอร์ม HTML ประเภทอินพุต HTML แอตทริบิวต์การป้อนข้อมูล HTML แอตทริบิวต์แบบฟอร์มการป้อนข้อมูล HTML

กราฟิกHTML

HTML Canvas HTML SVG

สื่อHTML

สื่อ HTML วิดีโอ HTML HTML Audio ปลั๊กอิน HTML HTML YouTube

HTML APIs

HTML Geolocation HTML ลาก/วาง HTML Web Storage HTML Web Workers HTML SSE

ตัวอย่างHTML

ตัวอย่าง HTML แบบทดสอบ HTML แบบฝึกหัด HTML ใบรับรอง HTML สรุป HTML การเข้าถึง HTML

ข้อมูลอ้างอิงHTML

รายการแท็ก HTML แอตทริบิวต์ HTML HTML Global Attributes รองรับ HTML Browser เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ HTML Doctypes ชุดอักขระ HTML การเข้ารหัส URL HTML HTML Lang Codes ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด

ตาราง HTML


ตาราง HTML ช่วยให้นักพัฒนาเว็บจัดเรียงข้อมูลเป็นแถวและคอลัมน์ได้


ตัวอย่าง

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

กำหนดตาราง HTML

ตารางใน HTML ประกอบด้วยเซลล์ตารางภายในแถวและคอลัมน์

ตัวอย่าง

ตาราง HTML อย่างง่าย:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

เซลล์ตาราง

แต่ละเซลล์ของตารางถูกกำหนดโดย a <td>และ</td>แท็ก

td ย่อมาจากข้อมูลตาราง

ทุกอย่างระหว่าง<td>และ</td>เป็นเนื้อหาของเซลล์ตาราง

ตัวอย่าง

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

หมายเหตุ:องค์ประกอบข้อมูลตารางเป็นที่เก็บข้อมูลของตาราง
พวกเขาสามารถมีองค์ประกอบ HTML ได้ทุกประเภท ข้อความ รูปภาพ รายการ ตารางอื่นๆ ฯลฯ



แถวตาราง

แต่ละแถวของตารางเริ่มต้นด้วย a <tr>และลงท้ายด้วย</tr>แท็ก

tr ย่อมาจากแถวตาราง

ตัวอย่าง

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

คุณสามารถมีแถวได้มากเท่าที่ต้องการในตาราง เพียงตรวจสอบให้แน่ใจว่าจำนวนเซลล์ในแต่ละแถวเท่ากัน

หมายเหตุ:มีบางครั้งที่แถวสามารถมีเซลล์น้อยกว่าหรือมากกว่าเซลล์อื่นได้ คุณจะได้เรียนรู้เกี่ยวกับสิ่งนั้นในบทต่อๆ ไป


ส่วนหัวของตาราง

บางครั้งคุณต้องการให้เซลล์ของคุณเป็นส่วนหัว ในกรณีดังกล่าว ให้ใช้ <th>แท็กแทน <td>แท็ก:

ตัวอย่าง

ให้แถวแรกเป็นส่วนหัวของตาราง:

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

โดยค่าเริ่มต้น ข้อความใน<th>องค์ประกอบจะเป็นตัวหนาและอยู่ตรงกลาง แต่คุณสามารถเปลี่ยนได้ด้วย CSS


แบบฝึกหัด HTML

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

เพิ่มแถวของตารางที่มีส่วนหัวของตารางสองหัว

ส่วนหัวของตารางทั้งสองควรมีค่าเป็น "ชื่อ" และ "อายุ"

<ตาราง>
  
    
    
  
  <tr>
    <td>จิลล์ สมิธ</td>
    <td>50</td>
  </tr>
</table>


แท็กตาราง HTML

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

สำหรับรายการแท็ก HTML ทั้งหมดที่มีอยู่ โปรดไปที่การอ้างอิงแท็ก HTMLของ เรา