ทำงานกับตารางใน HTML

ตอนนี้เราจะเรียนรู้วิธีการสร้างตาราง ใน HTML ฉันคิดว่าคุณคงนึกออกว่าตารางในชีวิตประจำวันคืออะไร มันคือชุดของแถว และคอลัมน์ โดยมีเซลล์อยู่ ที่จุดตัดกัน

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

โค้ดของตารางมีโครงสร้างที่เข้มงวด: สิ่งหลัก คือแท็ก table ภายในซึ่ง ควรมีแท็ก tr ที่ใช้สร้าง แถวของตาราง และภายในพวกมัน - แท็ก td ที่ใช้สร้างเซลล์ แท็ก table สามารถมีแอตทริบิวต์ border ซึ่ง กำหนดเส้นขอบให้กับตารางและเซลล์ของมัน

ลองมาสร้างตารางตัวอย่างที่มีสาม แถวและสามเซลล์ในแต่ละแถว:

html<table border="1">
  <tr>
    <td>cell 1</td>
    <td>cell 2</td>
    <td>cell 3</td>
  </tr>
  <tr>
    <td>cell 4</td>
    <td>cell 5</td>
    <td>cell 6</td>
  </tr>
  <tr>
    <td>cell 7</td>
    <td>cell 8</td>
    <td>cell 9</td>
  </tr>
</table>

Результат: