เริ่มต้นสร้างตารางอย่างง่ายใน HTML

ตาราง HTML เป็นหนึ่งในคำสั่ง HTML ที่ดีที่สุดที่เคยสร้างมา ความสามารถในการจัดรูปแบบหน้าเว็บด้วยคำสั่งตารางนั้นน่าทึ่งมาก! เรียนรู้ ใช้งาน ใช้งาน และรักพวกเขา!

ตารางพื้นฐาน:

ให้เรานำรายการซื้อของที่เราใช้ในบทช่วยสอนรายการมาทำเป็นตารางในครั้งนี้ เราจะใส่สินค้าในคอลัมน์แรกและราคาในคอลัมน์ที่สอง

นี่คือรหัสที่ทำให้มันเกิดขึ้น รหัสจริงอยู่ทางด้านซ้ายและคำอธิบายภาษาอังกฤษอยู่ทางด้านขวา คำอธิบายถูกเยื้องเพื่อแสดง "โครงสร้าง" ของคำสั่งตาราง

สับสน? โอเค มาดูตารางด้านบนกัน ตารางนี้เป็นจริงค่อนข้างง่าย คุณสร้างตารางในลักษณะเดียวกับที่คุณอ่านหนังสือ จากซ้ายไปขวาและจากบนลงล่าง ตารางเริ่มต้นด้วยแท็ก <table> และลงท้ายด้วยแท็ก </table> แต่ละแถวเริ่มต้นด้วยแท็ก <tr> และลงท้ายด้วยแท็ก </tr> ข้อมูลตารางแต่ละส่วนเริ่มต้นด้วยแท็ก <td> และลงท้ายด้วยแท็ก </td>

แต่นั่นไม่ใช่โต๊ะคุณพูด! มันไม่มีพรมแดน! จริงๆแล้วมันคือโต๊ะ มันเป็นตารางที่ไม่มีเส้นขอบหรือ BORDER=”0″ แนวคิดนี้สำคัญมากเมื่อคุณต้องการใช้คำสั่ง TABLE เพื่อจัดรูปแบบหน้าเว็บของคุณ คุณไม่ต้องการเส้นขอบหนาเสมอไป โอเค คราวนี้เรามาสร้างตารางที่มีเส้น ขอบ กัน

ความแตกต่างเพียงอย่างเดียวระหว่างตารางนี้และก่อนหน้านี้คือคำสั่ง <table> ซึ่งมีลักษณะดังนี้

<เส้นขอบตาราง=”7″>

ค่อนข้างง่ายใช่มั้ย ขนาดของเส้นขอบจะแสดงเป็นพิกเซล ตกลง ตอนนี้ มาทำ CELLSPACING เพิ่มอีกหน่อย นั่นคือระยะห่างระหว่างเซลล์ตารางของเรา คุณยังสามารถคิดได้ว่านี่เป็นความหนาของผนังระหว่างเซลล์ของตาราง

ที่ดูดีขึ้นมาก คุณเห็นความแตกต่างไหม การเปลี่ยนแปลงเพียงอย่างเดียวอยู่ในคำสั่ง <table> ซึ่งมีลักษณะดังนี้

<เส้นขอบตาราง=”7″การเว้นช่องเซลล์=”7″>

CELLSPACING เช่น BORDER ก็มีหน่วยวัดเป็นพิกเซลเช่นกัน แต่ข้อความดูใกล้กับผนังโต๊ะเกินไป คุณพูด! ตกลง ตกลง เราสามารถแก้ไขได้ด้วย เรียกว่า CELLPADDING เป็นช่องว่างระหว่างเนื้อหาของเซลล์และขอบของผนังเซลล์

อา ตอนนี้เป็นอย่างที่คุณต้องการแล้วเหรอ? ไม่? ฉันต้องพูดเกินจริงตัวเลขเล็กน้อย แต่นั่นเป็นเพียงเพื่อพยายามทำให้ประเด็น ฉันหวังว่าคุณจะเห็นความแตกต่าง ตารางก่อนหน้านี้ถูกสร้างขึ้นด้วยคำสั่ง <table> ที่แสดงด้านล่าง

<เส้นขอบตาราง=”7″การเว้นช่องเซลล์=”7″การแพดเซลล์=”7″>

กรอบรูป:

ตอนนี้เราต้องการที่จะได้รับในสิ่งที่สนุกมากขึ้น การจัดกรอบรูปภาพเป็นวิธีที่ยอดเยี่ยมในการปรับปรุงรูปภาพของคุณ มันทำให้พวกเขาดูเหมือนกระโดดออกจากหน้าทันที นี่คือผลงานชิ้นเอก 5 วินาทีของฉัน

งานศิลปะที่เจ๋งมาก มันทำให้ภาพที่น่ารังเกียจของฉันดูดี นี่คือรหัสที่สร้างมันขึ้นมา

<เส้นขอบตาราง=”7″ alt=””>
<tr>
<td><img src="image.gif"></td>
</tr>
</table>

แท็ก <tr> และ </tr> สามารถละทิ้งได้หากต้องการ มันจะยังทำงานได้ดี นักอ่าน HTML อาจโต้แย้งว่าแท็กเหล่านี้จำเป็นต้องอยู่ในนั้น ถ้าคุณรู้สึกแบบนั้น เหมือนที่ฉันทำบ่อยๆ ก็ใช้มันซะ

หรือคุณสามารถใส่กรอบรูปภาพของคุณด้วยข้อความดังที่แสดงด้านล่าง

เน็ตโต้ หึ! รหัสแสดงอยู่ด้านล่าง

<table border=”7″ cellpadding=”10″>
<tr>
<td><img src=”image.gif” alt=””></td>
<td>ช่างเป็น<br>ผลงานชิ้นเอก!</td>
</tr>
</table>

ฉันมีบันทึกย่ออีกหนึ่งข้อเกี่ยวกับการจัดเฟรมรูปภาพ หากคุณมีปัญหาในการจัดกึ่งกลางภาพ ให้ลองทำดังนี้

<td align="center"><img src=”image.gif”></td>

ลิงค์กรอบ:

คุณยังสามารถใส่ลิงก์ในตารางได้อีกด้วย ในความเป็นจริง คุณสามารถใส่ทั้งหน้าของคุณไว้ในพวงของคำสั่งตาราง หากคุณต้องการและโดยการใช้ BORDER=”0″ ไม่มีใครสามารถบอกได้จริงๆ ทำไมคุณถึงต้องการทำเช่นนั้นคุณถาม? สำหรับการจัดรูปแบบรูปภาพและข้อความร่วมกันบนหน้าของคุณ คิดเกี่ยวกับมัน ตกลง กลับไปที่การเชื่อมโยงเฟรม

นี่คือรหัสที่ทำ

<table border=”7″ cellpadding=”10″>
<tr>
<td><a href="http://www.google.com/”>Google.com</a></td>
<td><a href=”http://www.yahoo.com/”>Yahoo!</a></td>
</tr>
<tr>
<td><a href=”http://www.jjwdesign.com/”>JJW Design</a></td>
<td><a href=”http://www.iproundup.com/”>สรุป IP</a></td>
</tr>
</table>

ฉันหวังว่าคุณจะสนุกกับส่วนเล็กๆ นี้ในคำสั่ง <table> คุณสามารถใช้คำสั่ง <table> ทำอะไรได้มากกว่าที่ทำได้ในบทช่วยสอนนี้ อย่างไรก็ตาม ฉันหวังว่าสิ่งนี้จะช่วยได้

ลิงก์ไปยังบทช่วยสอนนี้!

คุณพบว่าบทช่วยสอนนี้มีประโยชน์หรือไม่? ถ้าเป็นเช่นนั้นโปรดช่วยฉันแบ่งปันกับผู้อื่นโดยเชื่อมโยงไปยังมัน เพียงวางโค้ด HTML ด้านล่างลงในหน้าเว็บของคุณเองเพื่อสร้างลิงก์ไปยังบทช่วยสอนนี้