نظرة جدول HTML يمكن تحسنت كثيرا مع CSS:
| شركة | اتصال | بلد |
|---|---|---|
| Alfreds Futterkiste | ماريا أندرس | ألمانيا |
| Berglunds snabbkop | كريستينا برجلاند | السويد |
| مركز توازي موكتيزوما | فرانسيسكو تشانغ | المكسيك |
| إرنست هاندل | رولان مندل | النمسا |
| تجارة الجزيرة | هيلين بينيت | المملكة المتحدة |
| Koniglich ايسن | فيليب كريمر | ألمانيا |
| يضحك باخوس Winecellars | يوشي Tannamuri | كندا |
| Magazzini ALIMENTARI Riuniti | جيوفاني روفيللي | إيطاليا |
الجدول حدود
لتحديد حدود الجدول في CSS، استخدم border الممتلكات.
يحدد المثال أدناه حد أسود ل <table> ، <th> ، و <td> عناصر هي:
لاحظ أن الجدول في المثال أعلاه، فإن الحدود مزدوجة. وذلك لأن كلا من الجدول و <th> و <td> عناصر لها حدود منفصلة.
طي الجدول حدود
و border-collapse تحدد الخاصية ما إذا كان ينبغي أن انهار حدود الجدول إلى الحدود واحد:
مثال
table
{
border-collapse: collapse;
}
table, th, td
{
border: 1px solid black;
} انها محاولة لنفسك » إذا كنت تريد فقط الحدود حول الطاولة، فقط تحديد border الملكية ل <table> :
طاولة العرض والارتفاع
يتم تحديد عرض وارتفاع جدولا width و height خصائص.
على سبيل المثال يضع تحت عرض الجدول إلى 100٪، وارتفاع <th> العناصر 50px:
محاذاة أفقية
و text-align الملكية يحدد المحاذاة الأفقية (مثل اليسار واليمين، أو الوسط) للمحتوى في <th> أو <td> .
افتراضيا، ومضمون <th> العناصر بالوسط ومضمون <td> تترك الانحياز العناصر.
المثال التالي اليسار محاذاة النص في <th> عناصر هي:
انحياز عمودي
في vertical-align الملكية بتعيين المحاذاة العمودية (مثل أعلى، أسفل، أو وسط) للمحتوى في <th> أو <td> .
افتراضيا، المحاذاة العمودية من المحتوى في الجدول هي الوسطى (لكل من <th> و <td> العناصر).
يقوم المثال التالي محاذاة النص العمودي إلى الأسفل ل <td> عناصر هي:
الحشو الجدول
للسيطرة على الفضاء بين الحدود والمحتوى في الجدول، استخدام padding الملكية على <td> و <th> عناصر هي:
المقسمات الأفقية
| الاسم الاول | الكنية | مدخرات |
|---|---|---|
| بيتر | الغرفين حيوان خرافي | $100 دولار |
| لويس | الغرفين حيوان خرافي | 150 $ |
| جو | سوانسون | 300 $ |
إضافة border-bottom العقار ل <th> و <td> لفواصل الأفقية:
الجدول Hoverable
استخدام :hover محدد على <tr> لتسليط الضوء على صفوف الجدول على الماوس فوق:
| الاسم الاول | الكنية | مدخرات |
|---|---|---|
| بيتر | الغرفين حيوان خرافي | $100 دولار |
| لويس | الغرفين حيوان خرافي | 150 $ |
| جو | سوانسون | 300 $ |
جداول مخططة
| الاسم الاول | الكنية | مدخرات |
|---|---|---|
| بيتر | الغرفين حيوان خرافي | $100 دولار |
| لويس | الغرفين حيوان خرافي | 150 $ |
| جو | سوانسون | 300 $ |
للجداول مخططة حمار وحشي، استخدام nth-child() محدد وإضافة background-color إلى حتى (أو الفردية) عن صفوف الجدول:
جدول اللون
يحدد المثال التالي لون الخلفية ولون النص من <th> عناصر هي:
| الاسم الاول | الكنية | مدخرات |
|---|---|---|
| بيتر | الغرفين حيوان خرافي | $100 دولار |
| لويس | الغرفين حيوان خرافي | 150 $ |
| جو | سوانسون | 300 $ |
الجدول تستجيب
سيتم عرض جدول تستجيب شريط التمرير الأفقي إذا كانت الشاشة صغيرة جدا لعرض المحتوى الكامل:
| الاسم الاول | الكنية | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط | نقاط |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| جيل | حداد | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 | 50 |
| حواء | جاكسون | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 | 94 |
| آدم | جونسون | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 | 67 |
إضافة عنصر حاوية (مثل <div> ) مع overflow-x:auto في جميع أنحاء <table> عنصر جعلها تستجيب:
المزيد من الأمثلة
عمل جدول الهوى
يوضح هذا المثال كيفية إنشاء جدول يتوهم.
تعيين موضع التسمية التوضيحية الجدول
يوضح هذا المثال كيفية وضع التسمية التوضيحية الجدول.
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 » التمرين 6»
خصائص الجدول CSS
| الملكية | وصف |
|---|---|
| border | يحدد كل خصائص الحدود في إعلان واحد |
| border-collapse | تحدد ما إذا كان ينبغي أو لا ينبغي انهار حدود الجدول |
| border-spacing | يحدد المسافة بين حدود الخلايا المجاورة |
| caption-side | يحدد وضع توضيحية الجدول |
| empty-cells | تحديد ما إذا كان أو لم يكن أحد لعرضهم الحدود والخلفية على الخلايا الفارغة في جدول |
| table-layout | يحدد خوارزمية تخطيط لاستخدامها للحصول على طاولة |