ما هو الجدول؟ وهي تتألف من خلايا الخلايا. في الجدول ، يعتمد عدد <TD> على عدد الخلايا الخلوية ملفوفة في كل صف <TR>! بالإضافة إلى ذلك ، لا يحتوي جدول الجدول الافتراضي على سطر جدول معروض في المتصفح قبل إضافة نمط CSS ؛
طرق كتابة الجدول المشتركة في HTML: A. <tr> ... </tr>: صف من الجدول ، هناك عدة أزواج من TR ، وهناك عدة صفوف ؛ ب. C. <h> ... </th>: خلية على رأس الجدول ، رأس الجدول ، والنص جريء وعرض في الوسط ؛ D. <جدول الجدول = Table Introduction Text>/*لن يتم عرض محتوى الملخص في المتصفح. تتمثل وظيفتها في زيادة قابلية القراءة (الدلالية) للجدول ، وتمكين محركات البحث من فهم محتوى الجدول بشكل أفضل ، وكذلك تمكين قراء الشاشة من مساعدة المستخدمين المميزين بشكل أفضل على قراءة محتوى الجدول. */ علامة E.Caption ، إضافة عنوان وملخص إلى الجدول ، يتم استخدام العنوان لوصف محتوى الجدول ، موقع عرض العنوان: فوق الجدول
<table border = cellpacing = cellpadding => <tr> <th> header </h> </tr> <tr> <td> البيانات </td> </tr> </table>
<table border = cellpacing = cellpadding = summary => <caption> </saption> <tr> <th> اليوم هو يوم الجمعة </td> </tr> </table>
بالعودة إلى الموضوع ، دعنا نعود إلى النقطة التي يكون فيها الفرق بين CellPadding و Cellping هو المقارنة بين المجموعة التالية من صور الجدول ورمز التخزين الخلوي:
<! doctype html> <html> <head> <meta charset = utf-8> <title> الاختلافات في الخلايا في الجدول </title> <type type = text/css> table {margin-bottom: 50px ؛ . /*يحدد المسافة بين حدود الخلايا المجاورة في الجدول. */} </style> </head> <table width = 600 cellpacing = 0 borderColor =#333 border = 1> <caption> الخلية الأولى </caption> <tr> <td> test 1 </td> <td> test 2 </td> <td> اختبار 3 </td> </tr> </tblate> <caption> الخلية الثانية </caption> <tr> <td> اختبار 1 </td> <td> اختبار 2 </td> <td> اختبار 3 </td> </tr> </table> <جدول WIDTH = 600 BorderColor =#333 border = 1 class = ceshi> <td> Test 3 </td> </r> </lood> </html>عند مقارنة الكود ، يحتوي الجدولين الأعلى على إعدادات مختلفة ، والآخر هو 0 والآخر هو 20. النتيجة المعروضة هي أن المسافة بين كل خلية في الجدول الأول هي 0 ، والمسافة بين كل خلية في الجدول الثاني هي 20. تمديد: الجدول الثاني متسق مع الجدول الثالث ، لكن الجدول الثالث لا يحتوي على تباعد الخلايا. وجدنا أن هذا التباعد الحدود: 20 بكسل ؛ هو نفس نتيجة تباعد الخلية = 20. على سبيل المثال الملخص: يتم استخدام سمة تباعد الخلية لتحديد الفجوة بين خلايا الجدول. قيمة المعلمة لهذه الخاصية هي رقم ، يشير إلى عدد نقاط البيكسل التي تشغلها فجوة الخلية.
<! doctype html> <html> <head> <meta charset = utf-8> <title> الاختلافات في cellpadding في الجداول </title> <type type = text/css> table {margin-bottom: 50px ؛ } </style> </head> <body> <عرض الجدول = 600px الحدود = 1 borderColor =#ccc cellpadding = 0> <tr> <th> أنا طاولة خلية سعيدة </th> <h> أنا طاولة خلية سعيدة </th> <tr> <th> أنا نموذج خلية سعيدة </th> <th> أنا نموذج خلية سعيدة </th> <th> أنا نموذج خلية سعيدة </th> أنا نموذج خلية سعيدة </th> </tr> </table> </body> </html>انطلاقًا من نتائج تشغيل الكود أعلاه: يحتوي الجدولين على قيم مختلفة من رموز CellPadding. في الجدول الأول ، عبارة "أنا سعيد خلية" هي 0 من الخلية التي توجد فيها ، وذلك لأن cellpadding = 0 تم تعيينه ؛ في الجدول الثاني ، فإن عبارة "أنا سعيد خلية" بعيدة عن الخلية التي توجد فيها ، أي المسافة بين الخلية التي أكون فيها خلية سعيدة هي 20 بكسل. ببساطة ، ما هي قيمة مساويا للخلايا الخلوية ، وعدد الفراغات التي يتم تركها إلى الداخل من حدود الخلايا في الطاولة ، ولن تدخل العناصر الموجودة في الخلية تلك الفراغات أبدًا. || لاحظ أن خاصية CellPadding تستخدم لتحديد حجم المسافة الفارغة بين محتوى الخلية وحدود الخلية. قيمة المعلمة لهذه الخاصية هي أيضًا رقم ، يشير إلى عدد وحدات البكسل التي يشغلها ارتفاع المسافة الفارغة بين محتوى الخلية والحدود العلوية والسفلية وعدد البكسلات التي يشغلها عرض المسافة الفارغة بين محتوى الخلية والحدود اليمنى واليسرى.
على سبيل المثال الملخص: يمثل توسع الخلايا المسافة بين الخلايا ، ويمثل اللوحات الخلوية المسافة بين محتوى الخلية والحدود ؛ السابق مثل الهامش ، هذا الأخير مثل الحشو. العش (الخلية)-محتوى الجدول ؛ تعبئة العش (ملء الجدول) (CellPadding)-يمثل مسافة خارج العش ، وتستخدم لفصل مساحة العش والعش ؛ مساحة العش (تباعد الجدول)-تمثل المسافة بين حدود الجدول وملء العش ، وهي أيضًا المسافة بين ملء العش
التوسع 1: كيفية دمج الصفوف والأعمدة من الجدول؟ دمج Colspan Cross Colrument ، Rowspan Cross-Row Merge
عرض الكود:
<! doctype html> <html> <head> <meta charset = utf-8> <title> الفرق بين colspan و rowspan </title> <style type = text/css> table {margin: 0 auto ؛ هامش القاع: 50 بكسل ؛ محاذاة النص: المركز ؛ } </style> </head> <body> <عرض الجدول = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#ccc> <caption> العرض العادي: صف واحد وثلاثة أعمدة </caption> <tr> <td> قل شيئًا ، لا تعرف </td> <td> قل شيء ، لا تعرف </td> العرض = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#cc> <caption> ما الذي يجب أن أفعله الآن لعرض صف واحد وعمودان؟ Colspan Cross-Column Merge </saption> <tr> <td> قل شيئًا ، لا أعرف </td> <td colspan = 2> قل شيئًا ، لا أعرف </td> <!-<td> قل شيئًا ، لا أعرف </td>-> </tr> </table> <!- ================================================================================================================================= ================================================================================================================================= ================================================================================================================================= ==================================================================================================================================== <td> قل شيئًا ، لا أعرف </td> </tr> <tr> <td> قل شيئًا ، لا أعرف </td> <td> قل شيئًا ، لا أعرف </td> <td> قل شيئًا ، لا أعرف </td> </tr> الأعمدة؟ Rowspan Cross-Row Merge </saption> <tr> <td rowspan = 2> قل شيئًا ، لا أعرف </td> <td> قل شيئًا ، لا أعرف </td> </tr> <tr> <!-<td> قل شيئًا ، لا أعرف </td>->التوسع 2: كيفية دمج حدود الطاولة؟ حدود الحدود: الانهيار.
<!-دمج خلايا الجدول-> <type type = text/css> table {border-collapse: collapse ؛ /* collapse الحدود: منفصلة ؛ * / /*يشير إلى ما إذا كان يتم ربط حدود الصف والخلايا في الجدول في حدود واحدة أو منفصلة كما في HTML القياسي. */} </style> <عرض الجدول = 600 cellpadding = 10 cellpacing = 2 border = 1 borderColor =#ccc> <tbody> <tr> <td> cell 1 </td> <td> cell 2 </td> <td> cell 3 </tbodأخيرًا ، في متصفح Chrome ، فإن لون الجدول الافتراضي على حدود الجدول الرمادي ، وتباعد الحدود هو 2 ، إلخ.
/* ورقة أنماط وكيل المستخدم* / /* TABLE {Display: Table ؛ حدود الحدود: منفصلة ؛ تباعد الحدود: 2 بكسل ؛ لون الحدود: رمادي. } * / / * border = 1 الافتراضي يساوي الحدود = 1px الحدود التربية: 1px ؛ عرض اليمين الحدودي: 1px ؛ عرض الحدود: 1 بكسل ؛ عرض الحدود اليساري: 1px ؛ * / /* bordercolor إرجاع أو يعين اللون الحدودي لألوان الكائن: W3C - سلسلة تحدد لون حدود العنصر. حدد إما اسم اللون أو رمز اللون RGB. */هذه هي المقالة حول تفاصيل الفرق بين cesllpacing و cellpadding في الجدول. لمزيد من المحتويات ذات الصلة من cesllpacing و cellpadding في الجداول ، يرجى البحث عن المقالات السابقة من wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!