HTML Academy · บทเรียน

แนวทางการจัดวางด้วยตาราง

ทำความเข้าใจว่าเหตุใดอีเมล HTML จึงใช้ตารางแทน div

แนวทางการจัดวางด้วยตาราง เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดจึงใช้ตารางสำหรับอีเมล

โปรแกรมรับส่งอีเมล โดยเฉพาะ Outlook บน Windows ซึ่งใช้เครื่องมือวาดผลของ Microsoft Word ไม่รองรับ flexbox, grid หรือแม้แต่การจัดวางระดับบล็อกที่เชื่อถือได้ ตารางจึงเป็นโครงสร้างพื้นฐานเพียงอย่างเดียวที่แสดงผลได้สม่ำเสมอในโปรแกรมรับส่งอีเมลหลักทุกชนิด

ตารางด้านนอกเพียงตารางเดียว

อีเมลแบบปรับตามหน้าจอทุกฉบับเริ่มต้นด้วย <table> ด้านนอกที่มีความกว้าง 100% และทำหน้าที่เป็นเนื้อหาอีเมล ตามด้วยตารางด้านในที่มีความกว้างคงที่ (โดยทั่วไปคือ 600px) ซึ่งบรรจุเนื้อหาจริง รูปแบบสองระดับนี้เป็นพื้นฐานของแม่แบบที่ใช้จริงแทบทุกแบบ

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table width="600" cellpadding="0" cellspacing="0" border="0">
        <tr><td>Content goes here</td></tr>
      </table>
    </td>
  </tr>
</table>

แอตทริบิวต์ตารางที่ต้องมี

ใส่ cellpadding="0" cellspacing="0" border="0" ในทุกตารางเสมอ หากไม่มีแอตทริบิวต์เหล่านี้ Outlook จะเพิ่มช่องว่างที่ไม่คาดคิด การเพิ่ม role="presentation" แจ้งโปรแกรมอ่านหน้าจอให้ข้ามความหมายของตาราง ซึ่งถูกต้องเพราะตารางจัดวางไม่ใช่ตารางข้อมูล

ตารางซ้อนสำหรับคอลัมน์

หากต้องการสร้างหลายคอลัมน์ ให้ซ้อนตารางที่มีเซลล์ <td> สองเซลล์ไว้ภายในแถวเนื้อหา แต่ละเซลล์จะเก็บหนึ่งคอลัมน์ หลีกเลี่ยงการใช้ div+float เพราะ Outlook ไม่รองรับ float และจะเรียงคอลัมน์ซ้อนกันในแนวตั้งอยู่ดี ทำให้การออกแบบเสียหาย

600px คือความกว้างมาตรฐาน

พื้นที่แสดงตัวอย่างบนเดสก์ท็อปตามมาตรฐานโดยพฤตินัยมีความกว้างประมาณ 600px การออกแบบให้มีความกว้างนี้ทำให้อีเมลแสดงได้อย่างพอดีโดยไม่ต้องเลื่อนในแนวนอนบน Outlook, Gmail เดสก์ท็อป, Apple Mail, Yahoo และ Thunderbird พร้อมกัน

การซ้อนบนมือถือด้วยคิวรีสื่อ

สำหรับหน้าจอขนาดเล็ก ให้กำหนดเป้าหมายที่เซลล์ตารางด้านในด้วยคิวรีสื่อ โดยตั้ง width เป็น 100% และ display เป็น block เพื่อให้คอลัมน์ซ้อนกันในแนวตั้ง iOS Mail และ Gmail Android รองรับคิวรีสื่อ ส่วน Outlook 365 เดสก์ท็อปจะเพิกเฉยต่อคิวรีเหล่านี้ แต่ยังคงใช้เค้าโครงเดสก์ท็อปความกว้าง 600px

@media (max-width: 600px) {
  .col {
    display: block !important;
    width: 100% !important;
  }
}

พื้นหลังระดับเซลล์

ควรใช้สีพื้นหลังและรูปภาพพื้นหลังกับเซลล์ <td> ไม่ใช่ div Outlook รองรับแอตทริบิวต์ bgcolor บน td ได้อย่างน่าเชื่อถือ ขณะที่ CSS background-color บน div อาจถูกลบหรือถูกเพิกเฉยทั้งหมด ทั้งนี้ขึ้นอยู่กับโปรแกรมรับส่งอีเมล

VML สำหรับพื้นหลังของ Outlook

Outlook ต้องใช้ภาษามาร์กอัปเวกเตอร์ (VML) สำหรับรูปภาพพื้นหลัง ให้ครอบ CSS background-image สมัยใหม่ด้วยความคิดเห็นแบบมีเงื่อนไข  พร้อมทางเลือกสำรองแบบ v:rect ที่อยู่ในบรรทัด เพื่อให้ Outlook แสดงรูปภาพ ขณะที่โปรแกรมรับส่งอีเมลอื่นใช้ CSS

หลีกเลี่ยง CSS สมัยใหม่

ข้าม flexbox, grid, คุณสมบัติกำหนดเอง (ซึ่งรองรับอย่างจำกัด) และการกำหนดตำแหน่งส่วนใหญ่ ให้ใช้ display: block/inline ความกว้างคงที่ผ่านแอตทริบิวต์ และสไตล์ในบรรทัดแทน ผลลัพธ์อาจดูเหมือนล้าสมัยตามมาตรฐานเว็บ แต่จะแสดงผลเหมือนกันในกล่องจดหมายทุกชนิด

Cellpadding สำหรับระยะห่างภายใน

ใช้ cellpadding (แอตทริบิวต์) และใช้ <td> ที่มีระยะห่างเพียงเซลล์เดียวสำหรับพื้นที่ว่างภายใน การใช้ระยะขอบกับเซลล์ตารางไม่น่าเชื่อถือใน Outlook ส่วน padding บน td รองรับได้ทั่วไป ให้ใช้ bgcolor และ padding ร่วมกันบน td เดียวกันเพื่อสร้างองค์ประกอบแบบ "การ์ด" โดยไม่ต้องใช้ div

การเข้าถึง

เพิ่ม role="presentation" ให้กับตารางจัดวางทุกตาราง เพื่อไม่ให้โปรแกรมอ่านหน้าจอประกาศว่า "แถว คอลัมน์ 1 จาก 2" นอกจากนี้ให้ใส่ข้อความ alt ในรูปภาพทุกภาพ ใช้ข้อความจริงสำหรับเนื้อหาทุกชนิด (ไม่ใช่รูปภาพที่มีข้อความ) และจัดลำดับหัวข้อให้มีลำดับชั้นที่ชัดเจน

ตรวจสอบความรู้

เหตุใดจึงใช้ตาราง ไม่ใช่ div ที่ใช้ CSS flexbox สำหรับจัดวางอีเมล

สรุป

การจัดวางอีเมล HTML ใช้ตารางซ้อนที่มี cellpadding/cellspacing/border เป็นศูนย์ และ role="presentation" ตารางด้านนอกความกว้าง 100% จะจัดตารางด้านในความกว้าง 600px ให้อยู่กึ่งกลาง ส่วนเซลล์ td ที่ซ้อนกันจะสร้างคอลัมน์ ซึ่งคิวรีสื่อสามารถทำให้ซ้อนกันบนมือถือได้ หลีกเลี่ยง flexbox/grid ใช้ bgcolor บน td และเพิ่มทางเลือกสำรอง VML สำหรับพื้นหลังของ Outlook

คำถามที่พบบ่อย

บทเรียน “แนวทางการจัดวางด้วยตาราง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แนวทางการจัดวางด้วยตาราง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แนวทางการจัดวางด้วยตาราง”

ทำความเข้าใจว่าเหตุใดอีเมล HTML จึงใช้ตารางแทน div คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “แนวทางการจัดวางด้วยตาราง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy