ตาราง 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
แท็กตาราง 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ของ เรา