การสร้างเว็บไซต์ด้วย HTML,สอนภาษา HTML: การสร้างตาราง

การสร้างตาราง

<table>เป็นแท็กคู่ และแท็กปิดคือ</table>
<table>เป็นแท็กคำสั่งของตารางทั้งหมด คลุมแท็กต่างๆที่อยู่ใน<table>
<table>จะคลุมแท็กคำสั่งที่อยู่ภายใน<table>คือ<tr>,<td>ซึ่งทำให้เป็น คอลัมน์และแถว คือ
<tr>เป็นแท็กคู่ และแท็กปิดคือ</tr>คือ คำสั่งสำหรับแถว
<td>เป็นแท็กคู่ และแท็กปิดคือ</td>คือ คำสั่งสำหรับคอลัมน์(ช่อง)

ตัวอย่าง

<html>
<body>
<table border="1">
<tr><td>แถวที่ 1 ช่องที่ 1</td><td>แถวที่ 1 ช่องที่ 2</td></tr>
<tr><td>แถวที่ 2 ช่องที่ 1</td><td>แถวที่ 1 ช่องที่ 2</td></tr>
</table>
</body>
</html>

ผลการแสดง
แถวที่ 1 ช่องที่ 1 แถวที่ 1 ช่องที่ 2
แถวที่ 2 ช่องที่ 1 แถวที่ 2 ช่องที่ 2
จะเห็นได้ว่ายังไม่เป็นรูปตาราง เพราะว่าเรายังไม่ได้ใส่ตัว แอททริบิวต์เสริมให้กับ <table>แอททริบิวต์ที่ใช้กับ<table>คือ border="เลข" ใส่จำนวนเลขให้กำหนด
ความหนาของเส้นตารางโดยวัดเป็นพิกเซล เช่น <table border="3">

ตัวอย่าง

<html>
<body>
<table border="2">
<tr><td>แถวที่ 1 คอลัมน์ที่ 1</td><td>แถวที่ 1 คอลัมน์ที่ 2</td></tr>
<tr><td>แถวที่ 2 คอลัมน์ที่ 1</td><td>แถวที่ 2 คอลัมน์ที่ 2</td></tr>
</table>
</body>
</html>

ผลการแสดง

แถวที่ 1 คอลัมน์ที่ 1	แถวที่ 1 คอลัมน์ที่ 2
แถวที่ 2 คอลัมน์ที่ 1	แถวที่ 2 คอลัมน์ที่ 2

bordercolor="สี" เป็นการกำหนดให้กับสีของเส้นตาราง โดยใส่รหัสสีหรือภาษาลงไป(อังกฤษเท่านั้น) เช่น <table bordercolor="red">

ตัวอย่าง

<html>
<body>
<table bordercolor="red">
<tr><td>สีเส้นตารางเป็นสีแดง</td></tr>
</table>
</body>
</html>

การแสดงผล

width="เลข" ใส่ตัวเลขเพื่อกำหนดความกว้างจากมุมซ้ายถึงมุมขวาของตาราง วัดเป็นพิกเซลหรือเปอร์เซ็น เช่น<table bordercolor="red" width="100">

ตัวอย่าง

<html>
<body>
<table border="1" width="50%">
<tr><td>กว้าง 50% คือครึ่งหน้ากระดาษ</td></tr>
</table>
</body>
</html>

ผลการแสดง

height="เลข" ใส่ตัวเลขเพื่อกำหนดความสูงจากบนลงล่างของตาราง วัดเป็นพิกเซลหรือเปอร์เช็น เช่น <table bordercolor="red" height="50%">

ตัวอย่าง

<html>
<body>
<table border="1" height="50%">
<tr><td>ความสูงครึ่งหน้ากระดาษ</td></tr>
</table>
</body>
</html>

ผลการแสดง

cellspacing="เลข" เป็นการกำหนดระยะห่างของเส้นกับตัวหนังสือ เช่น <table cellspacing="5">

cellpadding="เลข" เป็นการกำหนดระยะ

ตัวอย่าง

<html>
<body>
<table border="5" cellspacing="30">
<tr><td>ข้อความ</td></tr>
</table>
</body>
</html>

ผลแสดงผล

cellpadding="เลข" เป็นการกำหนดระยะห่างของเส้นกับตัวหนังสือ เช่น <table cellpadding="5">
cellpadding="เลข" เป็นการกำหนดระยะ

ตัวอย่าง

<html>
<body>
<table border="5" cellpadding="30">
<tr><td>ข้อความ</td></tr>
</table>
</body>
</html>

ผลการแสดง

การจัดตำแหน่ง ข้อความกับตาราง

<caption align="top">มีบน,ล่างเท่านั้น

ตัวอย่าง

<html>
<body>
<table border="5" width="50%" height="50%">
<caption align="top">ข้อความอยู่บนสุด</caption>
<tr><td>ข้อความ</td></tr>
</table>
</body>
</html>

ผลการแสดง

<caption align="bottom">มีบน,ล่างเท่านั้น

ตัวอย่าง

<html>
<body>
<table border="5" width="50%" height="50%">
<caption align="bottom">ข้อความอยู่ล่างสุด</caption>
<tr><td>ข้อความ</td></tr>
</table>
</body>
</html>

ผลการแสดง

เราสามารถใช้โค้ด html หลายอย่างเข้ามาเสริมตบแต่งได้ ไม่ว่าจะเป็น สีข้อความ สีพื้นหลัง ตัวหนังสือใหญ่ เล็ก ฯลฯ เช่น

ตัวอย่าง

<html>
<body>
<table border="5" bordercolor="red" width="50%">
<tr><td bgcolor="#ffffe6"><font color="red" size="5">ประเทศไทย</font></td><td><font size="5" color="blue">
<img src="dog.jpg">หมา</font></td></tr>
<tr><td width="100" height="100"><marquee>ข้อความวิ่ง</marquee></td><td width="100" height="100">
<a href="http://www.google.com"><center>ไปที่ Google</center></a></td></tr>
</table>
</body>
</html>

ผลการแสดง

การสร้างเว็บไซต์ด้วย HTML,สอนภาษา HTML

หน้าเว็บ

การสร้างตาราง

จำนวนการดูหน้าเว็บรวม