ข้อมูล

ลำดับตอนที่ #80 : โค้ดสร้างตารางhtml

วิธีสร้างตารางในบล็อก
ขั้นตอน 
เขียนบทความ>>HTML>>คัดลอกโค้ดด้านล่าง>>วางลงบทความ>>คลิก เขียน>>แทนเลข1ด้วยข้อความหรือรูปภาพ

อ้าวเฮ้ย!!!!.....นี่แฟนฉ๊าน.

.............................
คัดลอกโค้ดด้านล่างไปใช้ได้เลยครับ

<table border="2" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="bottom" width="30%">1</td></tr>
<tr>
</tbody></table>

**หมายเหตุ 
"2" คือขนาดเส้นรอบนอก (ดังภาพตัวอย่างเส้นรอบนอกขนาด"15")
"5" คือขนาดเส้นรอบใน,ชิดใน
แทน 1 ด้วยข้อความหรือรูปภาพ

โค้ดตาราง2x2ช่อง
<table border="2" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
</tr>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
</tr>
<tr>
</tbody></table>
</div>
 

จะได้ตาราง2x2ช่อง ดังภาพข่างล่างนี้ครับ

1	2
1	2

---------------------------------------
โค้ดตาราง3x2

<table border="2" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
</tr>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
</tr>
<tr>
</tr>
</tbody></table>
</div>

 

จะได้ตาราง3x2ช่อง ดังภาพข่างล่างนี้ครับ.....

1	2	3
1	2	3

------------------------------------------------
โค้ดตาราง4x2

<table border="2" cellpadding="5" cellspacing="5">
<tbody>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
<td width="30%">4</td>
</tr>
<tr>
<td valign="bottom" width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
<td width="30%">4</td>
</tr>
<tr>
</tr>
</tbody></table>
</div>
จะได้ตาราง4x2ช่อง ดังภาพข่างล่างนี้ครับ

1	2	3	4
1	2	3	4

**หมายเหตุ

2=ขนาดของเส้นกรอบนอก
5=ขนาดของช่อง
4=ความห่างของเส้นกรอบนอก และกรอบใน
ลองปรับขนาดได้ตามใจชอบครับ

<table border="2" cellpadding="5" cellspacing="4">
.............................................................

ดังรูปข้างล่างครับ

<table border="7" cellpadding="0.1" cellspacing="0.1"><tbody>
<tr> <td valign="bottom" width="30%">1</td> <td width="30%">2</td> <td width="30%">3</td> </tr>
<tr> </tr>
</tbody></table>

2

3

------------------------------------------------------------------------------------------------------------------


<table border="1">
<tr>
<th>Table header</th><th>Table header</th>
</tr>
<tr>
<td>Table cell 1</td><td>Table cell 2</td>
</tr>
<tr>
<td>Table cell 3</td><td>Table cell 4</td>
</tr>
</table>

----------------------------------------------------------------------------------------------------------------------

สกอบาร์

<div style="height:120px;width:120px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">
As you can see, once there's enough text in this box, the box will grow scroll bars... that's why we call it a scroll box! You could also place an image into the scroll box.
</div>


---------------------------------------------------------------------------------------------------------------------------


http://www.quackit.com/html/html_generators/html_marquee_generator.cfm