كيفية عمل حدود في الجدول CSS

تعرض أنماط المستعرض الافتراضية الجدول وخلاياه بدون حدود أو خلفية مرئية، ولا تكون الخلايا الموجودة داخل الجدول متجاورة مع بعضها البعض. باستخدام أنماط CSS، يمكنك تصميم جدول بشكل جميل وفقًا لمحتواه.

تساعدك الجداول التي تحتوي على مسافات بين الصفوف في التركيز على المعلومات ذات الصلة الموجودة في نفس الصف من الجدول، ولكن في الخلايا المجاورة. من أجل فصل النص عن الصورة، ضعه في خلية أخرى، مع دمج خليتين في رأس الجدول نموذج ، وقم بإزالة الحدود اليمنى بين الخلايا.

ترميز HTML

أنماط CSS

طاولة (
تباعد الحدود: 0 10 بكسل؛
عائلة الخطوط: "Open Sans"، sans-serif؛
وزن الخط: غامق؛
}
ذ (
الحشو: 10 بكسل 20 بكسل؛
الخلفية: #56433D؛
اللون: #F9C941؛
الحدود اليمنى: 2 بكسل صلبة؛
حجم الخط: 0.9em؛
}
ث:الطفل الأول (
محاذاة النص: يسار؛
}
ال: الطفل الأخير (
الحدود اليمنى: لا شيء؛
}
تد(
محاذاة رأسية: وسط؛
الحشو: 10 بكسل؛
حجم الخط: 14 بكسل؛
محاذاة النص: مركز؛
الحد العلوي: 2 بكسل صلب #56433D؛
الحد السفلي: 2 بكسل صلب #56433D؛
الحدود اليمنى: 2 بكسل صلب #56433D؛
}
td: الطفل الأول (
الحد الأيسر: 2 بكسل صلب #56433D؛
الحدود اليمنى: لا شيء؛
}
الدفتيريا: ن-الطفل(2)(
محاذاة النص: يسار؛
}

باستخدام هذه التقنية، يمكنك تصميم جدول بشكل فعال باستخدام الألوان المتناقضةوالتي سوف تتناسب بشكل متناغم مع نظام الألوان الخاص بموقعك.

ترميز HTML

أنماط CSS

طاولة (

حجم الخط: 14 بكسل؛
انهيار الحدود: انهيار؛
محاذاة النص: مركز؛
}
عشر، td: الطفل الأول (
الخلفية: #AFCDE7؛
اللون الابيض؛
الحشو: 10 بكسل 20 بكسل؛
}
ث، د (
نمط الحدود: صلب؛
عرض الحدود: 0 1px 1px 0;
لون الحدود: أبيض؛
}
تد(
الخلفية: #D8E6F3؛
}

محاذاة النص: يسار؛
}

بفضل إضافة خاصية border-radius إلى مواصفات CSS3، أصبح من الممكن الآن تقريب زوايا الجدول دون استخدام صور الخلفية. لتحقيق هذا التأثير، تحتاج إلى تقريب زوايا الخلايا المقابلة.

ترميز HTML
- مثل المثال 2.

أنماط CSS

طاولة (
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
حجم الخط: 14 بكسل؛
نصف قطر الحدود: 10 بكسل؛
تباعد الحدود: 0؛
محاذاة النص: مركز؛
}
ذ (
الخلفية: #BCEBDD؛
اللون الابيض؛
ظل النص: 0 1px 1px #2D2020;
الحشو: 10 بكسل 20 بكسل؛
}
ث، د (
نمط الحدود: صلب؛
عرض الحدود: 0 1px 1px 0;
لون الحدود: أبيض؛
}
ال:الطفل الأول، td:الطفل الأول (
محاذاة النص: يسار؛
}
ث:الطفل الأول (

}
ال: الطفل الأخير (

الحدود اليمنى: لا شيء؛
}
تد(
الحشو: 10 بكسل 20 بكسل؛
الخلفية: #F8E391؛
}
tr:الطفل الأخير td:الطفل الأول (
نصف قطر الحدود: 0 0 0 10 بكسل؛
}
tr:الطفل الأخير td:الطفل الأخير (
نصف قطر الحدود: 0 0 10px 0;
}
tr td: الطفل الأخير (
الحدود اليمنى: لا شيء؛
}

4. الجدول مع خلايا منفصلة

ترميز HTML

- مثل المثال 2.

أنماط CSS

طاولة (
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
محاذاة النص: يسار؛
انهيار الحدود: منفصل؛
تباعد الحدود: 5 بكسل؛
الخلفية: #ECE9E0؛
اللون: #656665؛
الحدود: 16 بكسل صلب #ECE9E0؛
نصف قطر الحدود: 20 بكسل؛
}
ذ (
حجم الخط: 18 بكسل؛
الحشو: 10 بكسل؛
}
تد(
الخلفية: #F5D7BF؛
الحشو: 10 بكسل؛
}

ترميز HTML

أنماط CSS

طاولة (
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
محاذاة النص: مركز؛
انهيار الحدود: انهيار؛
تباعد الحدود: 5 بكسل؛
الخلفية: #E1E3E0؛
نصف قطر الحدود: 20 بكسل؛
}
ذ (
حجم الخط: 22 بكسل؛
وزن الخط: 300؛
الحشو: 12 بكسل 10 بكسل؛

اللون: #F56433؛
}
tbody tr:nth-child(2) (
الحد السفلي: 2 بكسل صلب #F56433؛
}
تد(
الحشو: 10 بكسل؛
اللون: #8D8173؛
}

ترميز HTML

أنماط CSS

طاولة (
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
حجم الخط: 14 بكسل؛
محاذاة النص: يسار؛
انهيار الحدود: انهيار؛
نصف قطر الحدود: 20 بكسل؛
ظل الصندوق: 0 0 0 10 بكسل #F2906B;
اللون: #452F21؛
}
ذ (
الحشو: 10 بكسل 8 بكسل؛
الخلفية: أبيض؛
}
الجدول الرابع:الطفل الأول (
نصف قطر الحدود من أعلى اليسار: 20 بكسل؛
}
الجدول العاشر: الطفل الأخير (
نصف قطر الحدود من أعلى اليمين: 20 بكسل؛
}
تد(
الحد العلوي: 10 بكسل صلب #F2906B؛
الحشو: 8 بكسل؛
الخلفية: أبيض؛
}
الجدول td: الطفل الأول (
نصف القطر من أسفل إلى يسار: 20 بكسل؛
}
الجدول td:الطفل الأخير (
نصف القطر من أسفل إلى يمين: 20 بكسل؛
}

سيسمح لك الحمار الوحشي العمودي في تصميم الجدول بالتركيز على الأعمدة، كما أن التأثير عند المرور فوق الصف سيضيف جاذبية لمثل هذا الجدول.

ترميز HTML

أنماط CSS

طاولة (
تباعد الحدود: 0؛
الخلايا الفارغة: إخفاء؛
}
تد(
الحشو: 10 بكسل 20 بكسل؛
محاذاة النص: مركز؛

الانتقال: كل 0.5 ثانية خطية؛
}
td: الطفل الأول (
محاذاة النص: يسار؛
اللون: #3D3511؛
وزن الخط: غامق؛
}
ذ (
الحشو: 10 بكسل 20 بكسل؛
اللون: #3D3511؛
الحد السفلي: 1 بكسل صلب #F4EEE8؛
نصف قطر الحدود من أعلى اليسار: 10 بكسل؛
نصف قطر الحدود من أعلى اليمين: 10 بكسل؛
}
td: الطفل n (حتى) (
الخلفية: #F6D27E؛
}
td:nth-child(odd) (
الخلفية: #D1C7BF؛
}
ال: الطفل التاسع (حتى) (
الخلفية: #F6D27E؛
}
عشر:الطفل (الفردي) (
الخلفية: #D1C7BF؛
}
.القمة المستديرة (
نصف قطر الحدود من أعلى اليسار: 5 بكسل؛
}
.جولة القاع (
نصف القطر من أسفل إلى يسار: 5 بكسل؛
}
آر:تحوم TD(
الخلفية: #D1C7BF؛
وزن الخط: غامق؛
}

ترميز HTML

أنماط CSS

طاولة (
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
انهيار الحدود: انهيار؛
اللون: #686461؛
}
التسمية التوضيحية (
الحشو: 10 بكسل؛
اللون الابيض؛
الخلفية: #8FD4C1؛
حجم الخط: 18 بكسل؛
محاذاة النص: يسار؛
وزن الخط: غامق؛
}
ذ (
الحد السفلي: 3px صلب #B9B29F؛
الحشو: 10 بكسل؛
محاذاة النص: يسار؛
}
تد(
الحشو: 10 بكسل؛
}
tr:nth-child(odd) (
الخلفية: أبيض؛
}
tr:ن-الطفل (حتى) (
الخلفية: #E8E6D1؛
}

ترميز HTML

أنماط CSS

Table_col(
عائلة الخطوط: "Lucida Sans Unicode"، "Lucida Grande"، Sans-Serif؛
حجم الخط: 14 بكسل؛
العرض: 660 بكسل؛
الخلفية: أبيض؛
محاذاة النص: يسار؛
انهيار الحدود: انهيار؛
اللون: #3E4347؛
}
.table_col th:الطفل الأول، .table_col td:الطفل الأول (
اللون: #F5F6F6؛
الحدود اليسرى: لا شيء؛
}
.table_col ال(
وزن الخط: عادي؛
الحد السفلي: 2 بكسل صلب #F5E1A6؛


الحشو: 8 بكسل 10 بكسل؛
}
.table_col تد(
الحدود اليمنى: 20 بكسل أبيض خالص؛
الحد الأيسر: 20 بكسل أبيض خالص؛
الحشو: 12 بكسل 10 بكسل؛
اللون: #8b8e91؛
}

ترميز HTML

أنماط CSS

table_blur(
الخلفية: #f5ffff؛
انهيار الحدود: انهيار؛
محاذاة النص: يسار؛
}
.table_blur ال (
الحد العلوي: 1 بكسل صلب #777777؛

مربع الظل: أقحم 0 1px 0 #999999، أقحم 0 -1px 0 #999999؛
الخلفية: تدرج خطي(#9595b6, #5a567f);
اللون الابيض؛
الحشو: 10 بكسل 15 بكسل؛
الموقف: نسبي؛
}
.table_blur ث: بعد (
محتوى: ""؛
العرض محجوب؛
الموقف: مطلق؛
اليسار: 0؛
أعلى: 25%؛
الارتفاع: 25%؛
العرض: 100%؛
الخلفية: التدرج الخطي (rgba (255، 255، 255، 0)، rgba (255،255،255،.08))؛
}
.table_blur tr:nth-child(odd) (
الخلفية: #ebf3f9؛
}
.table_blur ال:الطفل الأول (
الحد الأيسر: 1 بكسل صلب #777777؛
الحد السفلي: 1 بكسل صلب #777777؛
مربع الظل: أقحم 1px 1px 0 #999999، أقحم 0 -1px 0 #999999؛
}
.table_blur ال:الطفل الأخير (
الحدود اليمنى: 1 بكسل صلب #777777؛
الحد السفلي: 1 بكسل صلب #777777؛
مربع الظل: أقحم -1px 1px 0 #999999، أقحم 0 -1px 0 #999999؛
}
.table_blur TD (
الحدود: 1 بكسل صلب #e3eef7؛
الحشو: 10 بكسل 15 بكسل؛
الموقف: نسبي؛
الانتقال: كل 0.5 ثانية سهولة؛
}
.table_blur tbody:تحويم td (
اللون: شفاف؛
ظل النص: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td (
اللون: #444444؛
ظل النص: لا شيء؛
}

تعد الجداول عنصرًا يستخدم على نطاق واسع لعرض البيانات المختلفة في العروض التقديمية والمحاضرات والنشرات الإعلانية والمزيد. نظرًا لوضوحها وتعدد استخداماتها وبساطتها، تُستخدم الجداول أيضًا على نطاق واسع على مواقع الويب من أجل نقل المواد الضرورية بشكل أفضل إلى القارئ. من خلال إضافة القوة الكاملة للأنماط إلى الجداول، يمكنك بنجاح ملاءمة الجداول في تصميم موقع الويب وتقديم البيانات الجدولية بشكل واضح وجميل.

عرض الجدول

بشكل افتراضي، يتم تعيين عرض الجدول بواسطة المتصفح نفسه، بناءً على حجم البيانات الجدولية الموجودة فيه. إذا كان هناك الكثير من النص في الخلايا، فسيشغل الجدول العرض بأكمله المتاح له، وإذا لم يكن هناك نص كافٍ، فسوف ينخفض ​​عرض الجدول تلقائيًا. إذا كان هناك عدة جداول على الصفحة، فإن عرضها المختلف يبدو أحيانًا غير مهم. لذلك من الأفضل تعيين عرض الجدول بشكل صريح بالنسب المئوية أو البكسل أو ems أو أي وحدات CSS أخرى، كما هو موضح في المثال 1.

مثال 1: عرض الجدول بالنسبة المئوية

جدول ( العرض: 100%; ) .tbl-متوسط ​​( العرض: 60%; ) .tbl-صغير ( العرض: 200px; )

في هذا المثال، يتم تطبيق عرض بنسبة 100% على كافة الجداول. مرة أخرى، تساعد الفئات في تعيين عرض الجداول المحددة باستخدام فئة تم إنشاؤها مسبقًا. لإعطاء الجدول عرض 200 بكسل، تحتاج إلى إضافة عنصر

محاذاة الجدول

في البداية، يوجد أي جدول على الحافة اليسرى من نافذة المتصفح. يمكنك محاذاته إلى المركز، ما لم يشغل الجدول المساحة المتوفرة بأكملها، بمعنى آخر، أقل من 100%. للقيام بذلك، أضف مسافات بادئة إلى نمط الجدول باستخدام خاصية الهامش مع القيمة auto، كما هو موضح في المثال 2.

مثال 2: محاذاة جدول مع باستخدام الهامش

في هذا المثال، تم تعيين كافة الجداول الموجودة في الصفحة على محاذاة للوسط.

لون الخلفية

يتم تعيين لون الخلفية لجميع خلايا الجدول في نفس الوقت من خلال خاصية الخلفية، والتي يتم تطبيقها على محدد الجدول. في هذه الحالة، يجب أن تتذكر قواعد استخدام الأنماط، على وجه الخصوص، وراثة خصائص العنصر. إذا قمت في نفس الوقت مع الجدول بتعيين لون للمحدد td أو th، فسيتم تعيينه كخلفية (المثال 3).

مثال 3: لون الخلفية

وتظهر نتيجة هذا المثال في الشكل. 1.

أرز. 1. تغيير لون الخلفية

إذا أردنا إنشاء نمط حمار وحشي، وهو الاسم الذي يطلق على الخطوط المتناوبة ذات الألوان المختلفة، فيجب علينا استخدام الفئة الزائفة :nth-child، وإضافتها إلى محدد tr. لكي يمتد الحمار الوحشي فقط إلى جسم الطاولة، وليس رأسها، نقوم بفصلهما عن بعضهما البعض باستخدام العناصر و (المثال 4).

المثال 4: إنشاء حمار وحشي

وتظهر نتيجة هذا المثال في الشكل. 2.

أرز. 2. حمار وحشي

القيمة الزوجية لمحدد :nth-child تطبق النمط على جميع الصفوف ذات الأرقام الزوجية وتحدد لون الخلفية الخاصة بها. يمكنك أيضًا تغييره إلى فردي، ثم سيتم تمييز الخطوط الفردية باللون الرمادي.

وبالمثل، يتم تمييز الأعمدة، وليس الصفوف، بالألوان؛ ولهذا يجب عليك استخدام محدد tbody td:nth-child(even) .

الهوامش داخل الخلايا

الهامش هو المسافة بين حدود الخلية ومحتوياتها. بدون الهوامش، فإن النص الموجود في الجدول "يلتصق" بالإطار، مما يضعف إدراكه، لكن إضافة الهوامش تعمل على تحسين إمكانية قراءة النص. لهذا الغرض، يتم استخدام خاصية نمط الحشو، والتي تعمل مع المحدد td أو th، كما هو موضح أعلاه في المثالين 3 و4. عادةً، يتم تحديد قيمة واحدة، والتي تحدد بعد ذلك المساحة الفارغة حول محتويات الخلية في جميع الجوانب في وقت واحد. تتم كتابة قيمتين عندما تحتاج إلى تعيين حقول مختلفة عموديًا (القيمة الأولى) وأفقيًا (القيمة الثانية).

المسافة بين الخلايا

توجد مساحة فارغة صغيرة بين الخلايا، وهي غير مرئية حتى تقوم بتعيين حد للخلايا أو لون الخلفية. يبلغ هذا التباعد في البداية 2 بكسل ويمكن تغييره باستخدام خاصية تباعد الحدود عن طريق إضافتها إلى محدد الجدول (المثال 5).

مثال 5: استخدام تباعد الحدود

الجدول ( تباعد الحدود: 3 بكسل؛ /* المسافة بين الخلايا */ ) العنوان ( الخلفية: #e08156; /* لون خلفية الرأس */ اللون: #333; /* لون النص */ ) td, th ( المساحة المتروكة: 5 بكسل ; /* الحقول في الخلايا */ الخلفية: #4c715b; /* لون خلفية الخلايا */ اللون: #f5e8d0; /* لون النص */ )

وبإضافة هذا النمط إلى أي جدول نحصل على النتيجة الموضحة في الشكل. 3.

أرز. 3. عرض الجدول مع المسافة بين الخلايا

إذا تمت إضافة خاصية border-collapse إلى الجدول مع طي القيمة، فسيتم تجاهل تباعد الحدود، لأنه لم يعد هناك أي مسافة بين الخلايا.

الحدود والإطارات

لفصل محتويات خلية عن أخرى بشكل واضح، تتم إضافة الحدود إلى الخلايا. يتم إنشاؤها بواسطة خاصية نمط الحدود، والتي يتم تطبيقها على العناصر ( أو ). ومع ذلك، فإن المزالق تنتظرنا هنا. وبما أنه يتم إنشاء إطار لكل خلية، يتم الحصول على حدود ذات سماكة مزدوجة حيث تتلامس الخلايا. هناك عدة طرق للقضاء على هذه الميزة. أبسطها هو استخدام خاصية border-collapse مع القيمةlapse . وتتمثل مهمتها في تتبع اتصال الخطوط وتصوير حد واحد بدلاً من الحدود المزدوجة. كل ما عليك فعله هو إضافة هذه الخاصية إلى محدد الجدول، وبعد ذلك سيقوم بكل شيء من تلقاء نفسه (المثال 6).

المثال 6: استخدام خاصية border-collapse عند إنشاء حدود الجدول

يظهر الشكل الفرق بين حدود الجدول مع خاصية border-collapse وبدونها. 4.

أرز. 4. عرض الجدول عند استخدام طي الحدود

في التين. يوضح الشكل 4 أ إطار الجدول الافتراضي. يرجى ملاحظة أن جميع الخطوط الموجودة داخل الطاولة ذات سمك مزدوج. تؤدي إضافة طي الحدود إلى إزالة هذه الميزة، ويصبح سمك جميع الخطوط هو نفسه (الشكل 4 ب).

ليس من الضروري أن تكون الخطوط على جميع جوانب الخلايا، ولكن يمكن تصميمها لفصل صف أو عمود عن الآخر. للقيام بذلك، نستخدم border-bottom و border-left وغيرها من الخصائص المماثلة. تطبيق الحدود على العناصر , , و هذا غير ممكن، لذلك نضيفهم إلى الجدول ومحدد td (المثال 7).

مثال 7. الخطوط بين السطور

وتظهر نتيجة هذا المثال في الشكل. 5.

أرز. 5. طاولة بخطوط أفقية

بشكل افتراضي، تتم محاذاة النص الموجود في خلية جدول إلى اليسار ومحاذاة إلى الوسط. الاستثناء هو العنصر ، فهو يحدد خلية رأس يتم فيها توسيط المحاذاة. لتغيير طريقة المحاذاة، استخدم خاصية نمط محاذاة النص (المثال 8).

المثال 8: محاذاة محتويات الخلية أفقيًا

في هذا المثال المحتوى يتم الانحياز إلى اليسار، والمحتوى - في المركز. تظهر نتيجة المثال أدناه (الشكل 6).

أرز. 6. محاذاة النص في الخلايا

يتم دائمًا توسيط المحاذاة العمودية في الخلية ما لم تتم الإشارة إلى خلاف ذلك. وهذا ليس مناسبًا دائمًا، خاصة بالنسبة للجداول التي تختلف محتويات خلاياها في الارتفاع. في هذه الحالة، يتم تعيين المحاذاة إلى الحافة العلوية للخلية باستخدام خاصية المحاذاة العمودية بقيمة top ، كما هو موضح في المثال 9.

مثال 9. محاذاة محتويات الخلية عموديا

في هذا المثال، تتم محاذاة النص إلى الحافة العلوية. وتظهر نتيجة المثال في الشكل. 7.

الغرض من الدرس:مقدمة إلى خصائص الجدول ومبادئ تخطيط جدول CSS

دعونا نلقي نظرة على خصائص جدول CSS الأساسية

حدود

تعتبر الخاصية واحدة وتتضمن عدة خصائص في وقت واحد:

• نمط الحدود
• عرض الحدود
• لون الحدود

هناك أيضًا قاعدة عامة:

table.collapse( طي الحدود: طي؛ ) جدول. منفصل ( طي الحدود: منفصل؛ )

نتيجة:

العرض والارتفاع
(ارتفاع وعرض الطاولة)

قيم:

مثال:

محاذاة النص
(المحاذاة الأفقية)

قيم:

• مركز (مركز)
• اليسار (على طول الحافة اليسرى)
• اليمين (الحافة اليمنى)
• تبرير (العرض)

محاذاة عمودية
(انحياز عمودي)

قيم:

• خط الأساس (على طول خط الأساس)
• فرعي (كمؤشر فرعي)
• سوبر (مثل superindex)
• أعلى (على طول الحافة العلوية)
• وسط (في الوسط)
• أسفل (على طول الحافة السفلية)
• % (من ارتفاع تباعد الأسطر)

مثال:

حشوة
(المسافات البادئة الداخلية في الجدول)

لون الخلفية (الخلفية)
اللون (لون النص)

تخطيط جدول CSS

نظرًا للعدد الكبير من خصائص الجدول والاختلافات في تصميمها، فقد كانت الجداول منذ فترة طويلة معيارًا لتخطيط صفحات الويب. إذا جعلت حدود الجدول غير مرئية، فيمكنك استخدام خلاياه الفردية ككتل منفصلة من الصفحة: الرأس، والقائمة، والتذييل، وما إلى ذلك.

ولكن هذا ليس صحيحا تماما، لأن كل علامة لها غرضها الخاص، ولا ينبغي استخدام الجداول لتخطيط الصفحة. ومع ذلك، فإن عدم وجود بديل دفع المصممين إلى استخدام طريقة التخطيط هذه.

الآن هناك طريقة أخرى - استخدام الطبقات، التي استبدلت الجداول تدريجيًا في هذا النوع من العمل بصفحة ويب. ومع ذلك، حتى في عصرنا، يستخدم بعض المصممين تخطيط الجدول بنجاح.

تخطيط جدولي بعمودين

إحدى طرق التخطيط الأكثر شيوعا هي عمودين، أي. تنقسم الصفحة إلى قسمين.

مثال:قم بتعيين الإطار الرئيسي للصفحة من عمودين: الأول - بحجم ثابت، والثاني - للمساحة المتبقية من المتصفح. أكمل المهمة باستخدام أنماط CSS ()

نتيجة:

مثال:تعيين خلفية مختلفةالخلايا (لفصل عمودين عن بعضهما البعض) وضبط المسافة بين الأعمدة (الفاصل)

/* للخلية اليسرى */ td#left( width:200px; الخلفية: #ccc; border:1px Solid black; /* تحديد الحدود مؤقتًا */ ) /* للخلية اليمنى */ td#right( الخلفية: #fc3; الحدود: 1 بكسل أسود خالص؛ /* تحديد الحدود مؤقتًا */ ) /* للمقسم */ #razdel( width: 10px; /* المسافة بين الأعمدة */ )

معاً:

تمت إضافة خلية جديدة للفاصل.
نتيجة:

مثال:إنشاء فاصل بين أعمدة الجدول باستخدام خط منقط يحد الخلايا المجاورة

/* للخلية اليسرى */ td#left( width:200px; الخلفية: #ccc; /* لون خلفية العمود الأيسر */ /* جديد */ border-right: 1px متقطع #000; /* خيارات الحدود المتقطعة اليمنى * / )

معاً:

نتيجة:

تخطيط الجدول بثلاثة أعمدة

هناك مفهوم للتخطيط الثابت أو "السائل".

تخطيط CSS ثابت

• استخدام تخطيط ثابت يتم تحديد عرض الجدول بأكمله بالبكسل، وبعد ذلك، بغض النظر عن دقة الشاشة ونافذة المتصفح، سيكون للجدول دائمًا نفس العرض.
• في هذه الحالة يجب أيضًا تثبيت عرض الأعمدة المتبقية.
• لا يمكنك تحديد عرض خلية واحدة، فسيتم حسابه تلقائيًا بناءً على أحجام الخلايا المتبقية والجدول بأكمله.

مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم تخطيط جدول ثابت:

• العمود الأيسر - 150 بكسل؛
• العمود الأوسط - 400 بكسل؛

نتيجة:

نموذج مطاطي

• عرض الجدولعند استخدام التصميم "المطاطي". تم تعيينه كنسبة مئوية من عرض نافذة المتصفح. الذي - التي. عندما تتغير نافذة المتصفح، يتغير حجم الجدول أيضًا.
• عرض جميع الخلايايمكن تركيبها بالنسب المئوية.
• الخيار الثاني هو متى عرض بعض الخلاياتم تنصيبه بالنسب المئوية، أ بعض - بالبكسل.

مهم:يجب أن يكون مجموع عرض كافة الأعمدة 100%، بغض النظر عن عرض الجدول.

مثال:

• العمود الأيسر - 20%؛
• العمود الأوسط - 40%؛
• العمود الأيمن - 40%؛

قم بتعيين خلفية للأعمدة وفصل الأعمدة بصريًا بحدود.

أداء:

نتيجة:

لنفكر في الخيار الثاني، عندما يتم تحديد عرض العمود المركزي تلقائيًا بواسطة المتصفح؛ مثال على ذلك الصورة التالية:

مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم تخطيط جدول مرن:

• العمود الأيسر - 150 بكسل؛
• العمود الأوسط - 40%؛
• العمود الأيمن - 200 بكسل؛

قم بتعيين خلفية للأعمدة وفصل الأعمدة بصريًا بحدود.

نتيجة:
ستكون النتيجة هي نفسها تقريبًا، ولن يحدث سوى "التمدد" بسبب العمود المركزي.

استخدام جدول متداخل في تخطيط مرن

إذا تم تعيين عرض عمودين بالنسب المئوية، والثالث بالبكسل، فلن تتمكن من التعامل مع جدول واحد فقط. لذا، إذا كان عرض الجدول بأكمله 100 بالمائة، والعمود الأول 200 بكسل، والأعمدة المتبقية 20 بالمائة، فإن عملية حسابية بسيطة توضح أن حجم العمود الأول هو 60 بالمائة. في هذه الحالة، لن يقبل المتصفح القيمة المحددة بالبكسل، وسيتم تعيين الحجم كنسبة مئوية.

• يتم إنشاء الجدول الأصلي بخليتين. يتم تعيين عرض الجدول كنسبة مئوية.
• للخلية اليسرىتم ضبط عرض (العمود الأول). بالبكسل.
• عرض الخلية الصحيح(أساس الأعمدة الأخرى) غير محدد. يتم إدراج جدول ثانٍ، يتكون أيضًا من خليتين، داخل هذه الخلية.
• يتم تعيين عرض خلايا الجدول المتداخلة كنسبة مئوية.
• يجب ضبط عرض الجدول الداخلي على 100 بالمائةبحيث يشغل هذا الجدول كل المساحة الحرة في الجدول الخارجي.
• يتم حساب عرض العمودين الأوسط والأيمن بالنسبة لعرض الخلية، وليس الجدول الخارجي ككل.

مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم التخطيط المرن مع الجدول المتداخل:

• العمود الأيسر - 150 بكسل؛
• العمود الأوسط - 60%؛
• العمود الأيمن - 40%؛

تعيين الخلفية للأعمدة.

أداء:

1 2 3 تعد سمات علامة cellpadding وcellpacing ضرورية هنا للتأكد من عدم وجود "فجوة" بين الجداول. نتيجة: الغرض من الدرس:مقدمة إلى خصائص الجدول ومبادئ تخطيط جدول CSS دعونا نلقي نظرة على خصائص جدول CSS الأساسية حدود تعتبر الخاصية واحدة وتتضمن عدة خصائص في وقت واحد: نمط الحدود عرض الحدود لون الحدود هناك أيضًا قاعدة عامة: table.collapse( طي الحدود: طي؛ ) جدول. منفصل ( طي الحدود: منفصل؛ ) نتيجة: العرض والارتفاع (ارتفاع وعرض الطاولة) قيم: مثال: محاذاة النص (المحاذاة الأفقية) قيم: مركز (مركز) اليسار (على طول الحافة اليسرى) اليمين (الحافة اليمنى) تبرير (العرض) محاذاة عمودية (انحياز عمودي) قيم: خط الأساس (على طول خط الأساس) فرعي (كمؤشر فرعي) سوبر (مثل superindex) أعلى (على طول الحافة العلوية) وسط (في الوسط) أسفل (على طول الحافة السفلية) % (من ارتفاع تباعد الأسطر) مثال: حشوة (المسافات البادئة الداخلية في الجدول) لون الخلفية (الخلفية) اللون (لون النص) تخطيط جدول CSS نظرًا للعدد الكبير من خصائص الجدول والاختلافات في تصميمها، فقد كانت الجداول منذ فترة طويلة معيارًا لتخطيط صفحات الويب. إذا جعلت حدود الجدول غير مرئية، فيمكنك استخدام خلاياه الفردية ككتل منفصلة من الصفحة: الرأس، والقائمة، والتذييل، وما إلى ذلك. ولكن هذا ليس صحيحا تماما، لأن كل علامة لها غرضها الخاص، ولا ينبغي استخدام الجداول لتخطيط الصفحة. ومع ذلك، فإن عدم وجود بديل دفع المصممين إلى استخدام طريقة التخطيط هذه. الآن هناك طريقة أخرى - استخدام الطبقات، التي استبدلت الجداول تدريجيًا في هذا النوع من العمل بصفحة ويب. ومع ذلك، حتى في عصرنا، يستخدم بعض المصممين تخطيط الجدول بنجاح. تخطيط جدولي بعمودين إحدى طرق التخطيط الأكثر شيوعا هي عمودين، أي. تنقسم الصفحة إلى قسمين. عادةً ما يكون الجانب الأيسر هو القائمة والعناصر الإضافية، والجانب الأيمن هو الجانب الرئيسي للمحتوى الرئيسي. في هذه الحالة، يتم ضبط عرض الجزء الأيسر على قيمة معينة، أي. بشكل صارم، ويشغل الجانب الأيمن المساحة المتبقية من الصفحة. في هذه الحالة، تحتاج إلى تعيين العرض الإجمالي للجدول بأكمله (علامة الجدول) بالنسبة المئوية من خلال خاصية العرض (100%)، وبالنسبة للخلية الأولى (علامة td) قم بتعيين العرض (خاصية العرض أيضًا) بالبكسل أو النسب المئوية. مثال:قم بتعيين الإطار الرئيسي للصفحة من عمودين: الأول - بحجم ثابت، والثاني - للمساحة المتبقية من المتصفح. أكمل المهمة باستخدام أنماط CSS () أداء: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف td = "يمين"> 2</ تد> </تر> </جدول> ... 1 2 ... نتيجة: الآن دعونا نحاول فصل عمودين من الجدول بشكل مرئي عن بعضهما البعض. مثال:تعيين خلفيات خلايا مختلفة (لفصل عمودين عن بعضهما البعض) وتعيين المسافة بين الأعمدة (الفاصل) أداء: دعونا نضيف خصائص نمط جديدة: /* للخلية اليسرى */ td#left( width:200px; الخلفية: #ccc; border:1px Solid black; /* تحديد الحدود مؤقتًا */ ) /* للخلية اليمنى */ td#right( الخلفية: #fc3; الحدود: 1 بكسل أسود خالص؛ /* تحديد الحدود مؤقتًا */ ) /* للمقسم */ #razdel( width: 10px; /* المسافة بين الأعمدة */ ) معاً: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف الTD = "razdel"> <معرف td = "يمين"> 2</ تد> </تر> </جدول> 1 2 تمت إضافة خلية جديدة للفاصل. نتيجة: يمكن أيضًا جعل الفاصل بين الأعمدة أقل وضوحًا. للقيام بذلك، سوف نستخدم أنماط الحدود. مثال:إنشاء فاصل بين أعمدة الجدول باستخدام خط منقط يحد الخلايا المجاورة أداء: دعونا نضيف خصائص حدود جديدة للخلايا: /* للخلية اليسرى */ td#left( width:200px; الخلفية: #ccc; /* لون خلفية العمود الأيسر */ /* جديد */ border-right: 1px متقطع #000; /* خيارات الحدود المتقطعة اليمنى * / ) معاً: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف td = "يمين"> 2</ تد> </تر> </جدول> 1 2 نتيجة: تخطيط الجدول بثلاثة أعمدة هناك مفهوم للتخطيط الثابت أو "السائل". تخطيط CSS ثابت استخدام تخطيط ثابت يتم تحديد عرض الجدول بأكمله بالبكسل، وبعد ذلك، بغض النظر عن دقة الشاشة ونافذة المتصفح، سيكون للجدول دائمًا نفس العرض. في هذه الحالة يجب أيضًا تثبيت عرض الأعمدة المتبقية. لا يمكنك تحديد عرض خلية واحدة، فسيتم حسابه تلقائيًا بناءً على أحجام الخلايا المتبقية والجدول بأكمله. مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم تخطيط جدول ثابت: العمود الأيسر - 150 بكسل؛ العمود الأوسط - 400 بكسل؛ أداء: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف td = "المركزي"> 2</ تد> <معرف td = "يمين"> 3</ تد> </تر> </جدول> 1 2 3 نتيجة: نموذج مطاطي عرض الجدولعند استخدام التصميم "المطاطي". تم تعيينه كنسبة مئوية من عرض نافذة المتصفح. الذي - التي. عندما تتغير نافذة المتصفح، يتغير حجم الجدول أيضًا. عرض جميع الخلايايمكن تركيبها بالنسب المئوية. الخيار الثاني هو متى عرض بعض الخلاياتم تنصيبه بالنسب المئوية، أ بعض - بالبكسل. مهم:يجب أن يكون مجموع عرض كافة الأعمدة 100%، بغض النظر عن عرض الجدول. مثال: العمود الأيسر - 20%؛ العمود الأوسط - 40%؛ العمود الأيمن - 40%؛ قم بتعيين خلفية للأعمدة وفصل الأعمدة بصريًا بحدود. أداء: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف td = "المركزي"> 2</ تد> <معرف td = "يمين"> 3</ تد> </تر> </جدول> 1 2 3 نتيجة: لنفكر في الخيار الثاني، عندما يتم تحديد عرض العمود المركزي تلقائيًا بواسطة المتصفح؛ مثال على ذلك الصورة التالية: مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم تخطيط جدول مرن: العمود الأيسر - 150 بكسل؛ العمود الأوسط - 40%؛ العمود الأيمن - 200 بكسل؛ قم بتعيين خلفية للأعمدة وفصل الأعمدة بصريًا بحدود. أداء: </الرأس> <الجسم > <معرف الجدول = "maket" تباعد الخلايا = "0"> <آر> <معرف td = "يسار"> 1</ تد> <معرف td = "المركزي"> 2</ تد> <معرف td = "يمين"> 3</ تد> </تر> </جدول> 1 2 3 نتيجة: ستكون النتيجة هي نفسها تقريبًا، ولن يحدث سوى "التمدد" بسبب العمود المركزي. استخدام جدول متداخل في تخطيط مرن إذا تم تعيين عرض عمودين بالنسب المئوية، والثالث بالبكسل، فلن تتمكن من التعامل مع جدول واحد فقط. لذا، إذا كان عرض الجدول بأكمله 100 بالمائة، والعمود الأول 200 بكسل، والأعمدة المتبقية 20 بالمائة، فإن عملية حسابية بسيطة توضح أن حجم العمود الأول هو 60 بالمائة. في هذه الحالة، لن يقبل المتصفح القيمة المحددة بالبكسل، وسيتم تعيين الحجم كنسبة مئوية. يتم إنشاء الجدول الأصلي بخليتين. يتم تعيين عرض الجدول كنسبة مئوية. للخلية اليسرىتم ضبط عرض (العمود الأول). بالبكسل. عرض الخلية الصحيح(أساس الأعمدة الأخرى) غير محدد. يتم إدراج جدول ثانٍ، يتكون أيضًا من خليتين، داخل هذه الخلية. يتم تعيين عرض خلايا الجدول المتداخلة كنسبة مئوية. يجب ضبط عرض الجدول الداخلي على 100 بالمائةبحيث يشغل هذا الجدول كل المساحة الحرة في الجدول الخارجي. يتم حساب عرض العمودين الأوسط والأيمن بالنسبة لعرض الخلية، وليس الجدول الخارجي ككل. مثال:إنشاء قالب صفحة من ثلاثة أعمدة. استخدم التخطيط المرن مع الجدول المتداخل: العمود الأيسر - 150 بكسل؛ العمود الأوسط - 60%؛ العمود الأيمن - 40%؛ تعيين الخلفية للأعمدة. أداء: 1 2 3 تعد سمات علامة cellpadding وcellpacing ضرورية هنا للتأكد من عدم وجود "فجوة" بين الجداول. نتيجة: في هذه المقالة سوف ترى كيفية الاستخدام أنماط CSSتنسيق الجداول. في الأيام الأولى للإنترنت، غالبًا ما استخدم المصممون الجداول لإنشاء التخطيطات. الآن تم تمييز جميع المواقع تقريبًا بـ مساعدة في CSSويتم استخدام الجداول للغرض المقصود منها - لعرض البيانات. العلامات لتخطيط الجدول يمكن صنع الجدول باستخدام العلامات التالية: يمكن إنشاء جدول باستخدام العلامات التالية: يحدد عنوان الجدول (أشبه بالتوقيع). يحدد عمود واحد في الجدول. يحدد مجموعة من الأعمدة في الجدول. ينشئ جدولاً. يحدد صفًا واحدًا أو أكثر في الجدول. إنشاء خلية واحدة في الجدول. تحديد الصفوف التي تظهر في أسفل الجدول. يحدد عنوانًا لكل عمود في الجدول. مصمم لتخزين صف واحد أو أكثر معروض في أعلى الجدول. ينشئ صفًا في جدول. كما ترون، يمكن استخدام عدد كبير من العلامات في الجداول، وكلما زاد عدد أنماط CSS التي يمكننا استخدامها في كل حالة محددة. أدناه سيتم مناقشتها خصائص CSS، يستخدم لتنسيق الجداول. الحدود لا ترث الخلايا الحدود الموضحة في علامة الجدول. يمكن وصف حدود خلايا الجدول باستخدام خاصية الحدود، ولكن هذا يؤدي إلى إنشاء فجوة. ث، TD (الحدود: 2 بكسل أسود خالص؛) يمكن إزالة هذه المساحة باستخدام خاصية تباعد الحدود في CSS (في IE ستحتاج إلى سمة تباعد الخلايا لعلامة الجدول). ومع ذلك، إذا قمت بإزالة المساحة، فسوف يتضاعف حجم الحدود. الجدول (تباعد الحدود: 0؛) للتخلص من الحدود والمسافات المزدوجة، استخدم خاصية border-collapse مع القيمةlapse . الجدول (انهيار الحدود:انهيار؛) المسافات البادئة المسافات البادئة (في سمة HTML cellpadding) يتم تعريفها باستخدام خاصية الحشو. لا يمكن تطبيقه إلا على الخلايا ( ) أو إلى الخلايا الموجودة تحت العناوين ( ) . ث، TD (الحشوة: 10 بكسل 12 بكسل 13 بكسل 14 بكسل؛) تنسيق خاصية محاذاة النص تعمل خصائص محاذاة النص (سمة المحاذاة في HTML) وخصائص المحاذاة العمودية على محاذاة المحتوى داخل خلية الجدول. تعمل خاصية محاذاة النص (القيم: يسار، يمين، مركز، ضبط) على محاذاة المحتوى أفقيًا. نطاق العلامات: , , . ث، تد، الجدول (محاذاة النص: المركز؛) خاصية المحاذاة العمودية تعمل خاصية المحاذاة العمودية (القيم: top , baseline , Bottom , middle ) على محاذاة المحتوى عموديًا. نطاق التطبيق: ال، الدفتيريا. ث، TD (محاذاة عمودية: أسفل؛) تنسيق الأعمدة يمكنك تطبيق خصائص العرض وخصائص مجموعة الخلفية على علامات col وcolgroup. يعد هذا مناسبًا إذا كنت تريد تمييز عمود أو ضبطه على عرض محدد. الفئة والمعرفات لتنسيق خلية أو جدول معين، لا تنس الفئات والمعرفات وما إلى ذلك. أخبر الأصدقاء تويتر اليوتيوبرز هم... كيفية كسب المشتركين على اليوتيوب: أشارك الطرق المدفوعة والمجانية كيف اكتسب مدونو اليوتيوب المشهورون المشتركين المقالة التالية مجموعة Yoola VSP التابعة لموقع YouTube اقرأ أيضا كيفية إضافة صور إلى Instagram من الكمبيوتر: طرق العمل 2023-10-16 00:04:34 كيفية معرفة كلمة المرور الخاصة بـ VK على Android - ابحث عن كل ما هو مخفي 2023-10-16 00:04:34 الاختيار الصحيح لعلامات التصنيف على Instagram 2023-10-16 00:04:34 كيفية تنزيل مقاطع الفيديو من Odnoklassniki مجانًا وبدون تسجيل ما اسم التطبيق للتنزيل في Odnoklassniki 2023-10-16 00:04:34