HTML Tables and Lists

1.Tables

Table หรือตาราง ช่วยให้เราสามารถจัดเรียงยข้อมูลใหอยู่รูปแบบของตารางที่มีระเบียบ โดยภายในตารางประกอบไปด้วย แถว และคอลัมน์ ซึ่งใช้ element ดังต่อไปนี้ 

  • <table> สร้างตาราง
  • <tr> สร้างแถว
  • <th> สร้างคอลัมน์ในส่วนหัวของตาราง (ค่าเริ่มต้นของตัวหนังสือ เป็นตัวหนา อยู่กึ่งกลางของคอลัมน์)
  • <td> สร้างคอลัมน์ทั่วไป (ค่าเริ่มต้นปกติ ตำแหน่งชิดซ้าย)

ตัวอย่างที่ 1 ตารางพื้นฐาน

<html>
 <body>
  <table border="1">
   <tr>
    <th>หัวข้อที่ 1 </th>
    <th>หัวข้อที่ 2</th>
    <th>หัวข้อที่ 3</th>
   </tr>
   <tr>
    <td>ข้อมูลที่ 1</td>
    <td>ข้อมูลที่ 2</td>
    <td>ข้อมูลที่ 3</td>
   </tr>
   <tr>
    <td>ข้อมูลที่ 4</td>
    <td>ข้อมูลที่ 5 </td>
    <td>ข้อมูลที่ 6</td>
   </tr>
  </table>
 </body>
</html>

ไฟล์ที่ 1 การสร้างตารางพื้นฐาน

 

ตัวอย่างที่ 2 การจัดรูปแบบตารางด้วย Internal CSS

<html>
<style>
 table{
 	width:100%;
    border-collapse: collapse;
    
 }
 th{
 	padding:10px;
    background-color: rgb(40,150,255);
    color:white;
 }
 td{
 	padding:6px;
 }
</style>
 <body>
  <table border="1">
   <tr>
    <th>หัวข้อที่ 1 </th>
    <th>หัวข้อที่ 2</th>
    <th>หัวข้อที่ 3</th>
   </tr>
   <tr>
    <td>ข้อมูลที่ 1</td>
    <td>ข้อมูลที่ 2</td>
    <td>ข้อมูลที่ 3</td>
   </tr>
   <tr>
    <td>ข้อมูลที่ 4</td>
    <td>ข้อมูลที่ 5 </td>
    <td>ข้อมูลที่ 6</td>
   </tr>
  </table>
 </body>
</html>

ไฟล์ที่ 2 จัดรูปแบบตารางด้วย CSS

 

2.Lists

Lists หรือ รายการช่วยให้เราสามารถจัดเรียงข้อมูลได้อย่างมีระเบียบ ซึ่งรายการแบ่งออกเป็น 3 รูปแบบดังนี้

  1. Unodered Lists (รายการที่ไม่แสดงลำดับเริ่มต้น)
  2. Odered Lists (รายการที่แสดงลำดับเริ่มต้น)
  3. Description Lists (รายการที่ใช้ในการอธิบาย)

 

2.1 Unodered Lists

รายการที่ไม่แสดงลำดับ ซึ่งจะแสดงเป็น วงกลม สี่เหลี่ยม หรือลูกศร เป็นต้น ซึ่ง Unorder list มีค่าเริ่มต้นเป็นวงกลมขนาดเล็ก

การสร้างรายการที่ไม่แสดงลำดับ เริ่มต้นด้วยแท็ก <ul> และภายในมีแท็ก <li> ที่แสดงแต่ละรายการ ดังตัวอย่างต่อไปนี้

ตัวอย่างที่ 1 รายการที่ไม่แสดงลำดับ <UL>

<html>
<body>
 <ul>
  <li>รายการที่ 1 </li>
  <li>รายการที่ 2 </li>
  <li>รายการที่ 3</li>
  <li>รายการที่ 4</li> 
 </ul>
</body>
</html>

ไฟล์ที่ 1 unorder_list.html

 

2.2 Ordered Lists

รายการที่มีการแสดงลำดับเริ่มต้น เช่น รายที่แสดงลำดับเป็นตัวเลข (เริ่มจาก 1,2,3,4,5,…) หรือลำดับที่เป็นตัวอักษรภาษาอังกฤษ (เริ่มจาก a,b,c,d,…) ซึ่ง Order list มีค่าเริ่มต้นเป็นตัวเลข

การสร้างรายการที่แสดงลำดับใช้แท็ก <ol> เป็นแท็กเริ่มต้น และภายในมีแท็ก <li> เพื่อแสดงข้อมูแต่ละรายการดังตัวอย่างต่อไปนี้

ตัวอย่างที่ 2 รายการที่แสดงลำดับ <ol>

<html>
<body>
 <ol>
  <li>รายการที่ 1 </li>
  <li>รายการที่ 2 </li>
  <li>รายการที่ 3</li>
  <li>รายการที่ 4</li> 
 </ol>
</body>
</html>

ไฟล์ที่ 2 order_list.html

 

2.3 Description Lists

การสร้างรายการอธิบายเริ่มต้นด้วยแท็ก <dl> และภายในประกอบด้วย แท็ก <dt> เป็นเหมือนหัวข้อ ตามด้วยแท็ก <dd> เป็นส่วนที่อธิบาย ซึ่งสามารถทำความเข้าใจให้ลึกซึ้งจากตัวอย่างต่อไปนี้

ตัวอย่างที่ 3 รายการอธิบาย <dl>

<html>
  <body>
    <dl>
      <dt>สิงโต</dt>
      <dd>-เจ้าป่าที่น่าเกรงขาม</dd>
      <dt>เสือชีตาห์</dt>
      <dd>-เจ้าแห่งความเร็ว</dd>
    </dl>
  </body>
</html>

ไฟล์ที่ 3 description_list.html

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: