التأثير النهائي هو كما يلي:
2. استخدم سمات الجدول ذات الحدود الداكنة (bordercolordark) والحدود الفاتحة (bordercolorlight) لإنشاء جدول بخط رفيع:
أو اضغط على Ctrl+Alt+T لإدراج الجدول، وتعيينه كما هو موضح في مربع الحوار (يتم إصلاح العناصر ذات المربعات الحمراء، وإلا فلن يكون لها أي تأثير)
بعد تحديد الجدول، اضغط على F9 لتوسيع مجموعة لوحة "Tag Inspector" وضبط الإعدادات في لوحة "Attributes" كما هو موضح أدناه:
وبعد الإنتهاء يصبح بالشكل التالي:
3. قم بتعيين طي حدود سمة CSS للجدول: اضغط على Ctrl + Alt + T لإدراج الجدول. إعداد مربع الحوار هو نفس الطريقة الثانية. حدد الجدول وقم بتعيين لون حدود الجدول في لوحة الخصائص:
اضغط على F9 لتوسيع لوحة "Tag Inspector"، ثم املأ "border-collapse:collapse;" في "style" في لوحة "Attributes".
وبعد الإنتهاء يصبح بالشكل التالي:
ملاحظة: الجدول الرفيع الذي تم إنشاؤه بواسطة الطريقة الثالثة مناسب فقط لـ IE5+ الطريقة الأكثر توافقًا هي الطريقة الأولى. الطريقة الثانية ليست جدولًا رفيعًا بالمعنى الدقيق للكلمة.
نصيحة: في الطريقة الأولى، يمكنك استخدام CSS لتحديد لون خلفية خلايا الجدول لتقليل كمية التعليمات البرمجية:
<نمط>
.رقيقة{الخلفية:#000000}
رقيقة TD{الخلفية:#FFFFFF}
</نمط>
<عرض الجدول = "200" الحدود = "0" تباعد الخلايا = "1" خلية الحشو = "0" فئة = "رفيع">
<تر>
<td> </td>
<td> </td>
<td> </td>
</tr>
<تر>
<td> </td>
<td> </td>
<td> </td>
</tr>
<تر>
<td> </td>
<td> </td>
<td> </td>
</tr>
</الجدول>