تنسيق وتصميم الجداول بإستخدام لغة CSS
تستخدم الجداول عادةً لعرض البيانات المجدولة ، مثل التقارير المالية.
ولكن عندما تقوم بإنشاء جدول HTML بدون أي أنماط أو سمات ، فإن متصفحات الويب سوف تعرضها بدون أي حدود. بإستخدام خصائص لغة CSS يمكننا تحسين مظهر الجداول بشكل كبير.
توفر لغة CSS العديد من الخصائص التي تسمح لنا بالتحكم في تخطيط وعرض عناصر الجدول. في هذا الدرس سوف نتعلم كيفية استخدام لغة CSS لإنشاء جداول أنيقة ومتسقة.
إضافة الحدود للجداول css
إن الخاصية border من لغة CSS هي أفضل طريقة لإضافة حدود للجداول.
في المثال التالي سنقم بإضافة حد أسود لعناصر <table> و <th> و <td>.
<!DOCTYPE html>
<html>
<head>
<title>إضافة الحدود للجداول</title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
بشكل افتراضي ، يرسم متصفح الويب حدًا حول الجدول ، وكذلك حول جميع الخلايا ، مع بعض المسافة بينهما ، مما يؤدي إلى حد مزدوج. للتخلص من مشكلة الحدود المزدوجة هذه ، يمكنك ببساطة دمج حدود خلايا الجدول المجاورة وجعل الحدود خطا واحدا فقط.
دعنا نلقي نظرة على الرسم التوضيحي التالي لفهم كيفية تطبيق الحدود على الجدول.
دمج حدود الجداول css
كما لاحظنا من الرسم التوضيحي السابق الشكل الافتراضي لحدود الجدول هي الحدود المزدوجة لكل خلية من خلايا الجدول حدودها المميزة الخاصة بها.
. باستخدام الخاصية border-collapse من لغة CSS يمكننا دمج حدود الجدول بحيث تشترك خلايا الجدول المجاورة في حد مشترك.
لنجرب المثال التالي لفهم كيفية عمل الخاصية border-collapse :
<!DOCTYPE html>
<html>
<head>
<title>دمج حدود الجداول</title>
<style>
table, th, td {
border: 1px solid black;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
يمكننا أيضًا إزالة المسافة بين حدود خلايا الجدول من خلال الخاصية border-spacing من لغة CSS مع القيمة 0. ومع ذلك ، فإنها تزيل المساحة فقط ولكن لا تقوم بدمج الحدود كما هو الحال عندما نقوم بإستخدام الخاصية border-collapse مع القيمة collapse.
تعديل المساحة داخل الجداول
بشكل افتراضي ، ينشئ متصفح الويب خلايا الجدول كبيرة بما يكفي لاحتواء البيانات في داخلها.
لإضافة مساحة أكبر بين محتويات خلية الجدول وحدود الخلية ، يمكنك ببساطة استخدام الخاصية padding من لغة CSS.
لنجرب المثال التالي ونرى كيفة عملها:
<!DOCTYPE html>
<html>
<head>
<title>تعديل المساحة داخل الجداول</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
يمكننا أيضًا ضبط التباعد بين حدود الخلايا باستخدام الخاصية border-spacing من لغة CSS ، إذا كانت حدود الجدول غير مدمجة (بالشكل الافتراضي).
لنجرب المثال التالي ونرى كيفة عملها
<!DOCTYPE html>
<html>
<head>
<title>ضبط التباعد بين حدود الخلايا</title>
<style>
table {
border-spacing: 10px;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
تحديد عرض وارتفاع الجدول css
بشكل افتراضي ، سيتم عرض الجدول بشكل عريض وطويل بما يكفي لاحتواء كافة محتوياته.
ومع ذلك ، يمكنك أيضًا تحديد عرض الجدول وارتفاعه وكذلك خلاياه بشكل صريح باستخدام الخاصية width و الخاصية height من لغة CSS.
في المثال التالي سنقوم بتحديد عرض الجدول ب 100٪ ، وارتفاع الخلايا العنوانية th ب 40 بكسل.
<!DOCTYPE html>
<html>
<head>
<title>تحديد عرض وارتفاع الجدول</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #dee2e6;
}
th {
height: 40px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
التحكم في شكل الجدول النهائي
يتوسع الجدول ويتقلص لاستيعاب البيانات الموجودة بداخله. هذا هو السلوك الافتراضي. مع امتلاء البيانات داخل الجدول ، تستمر في التوسع طالما هناك مساحة. ومع ذلك ، في بعض الأحيان ، من الضروري تعيين عرض ثابت للجدول من أجل التحكم في الشكل النهائي للجدول.
يمكنك القيام بذلك بمساعدة الخاصية table-layout من لغة CSS. تحدد هذه الخاصية الخوارزمية التي سيتم استخدامها لعرض الجدول بالشكل النهائي (خلايا الجدول والصفوف والأعمدة). تأخذ هذه الخاصية واحدة من قيمتين:
auto- باستخدام هذه القيمة سيتم تعديل عرض الجدول وخلاياه لتناسب المحتوى. هذه هي القيمة الافتراضية.fixed- باستخدام هذه القيمة ، لا يعتمد شكل الجدول النهائي على محتوى الخلايا ؛ يعتمد فقط على عرض الجدول وعرض الأعمدة والحدود أو تباعد الخلايا. عند استخدام هذه القيمة عادة ما يكون عرض الجدول داخل المتصفح أسرع من استخدام القيمةauto.
في المثال التالي سنقوم باستخدام القيمة fixed للخاصية table-layout وسنقوم بتحديد عرضه ب 300 بكسل.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>التحكم في شكل الجدول النهائي</title>
<style>
table {
width: 250px;
border-collapse: separate;
}
table, tr, th, td{
border: 1px solid #000000;
}
.auto {
table-layout: auto;
}
.fixed {
table-layout: fixed;
}
td{
width: 50%;
}
.note {
direction : rtl;
text-align : right;
color : blue;
}
</style>
</head>
<body>
<table class="auto">
<caption>Example 1. Auto</caption>
<tr>
<th>Name</th>
<td>Murad Mustafa</td>
</tr>
<tr>
<th>Email</th>
<td>murad.sh.m@gmail.com</td>
</tr>
</table>
<br>
<table class="fixed">
<caption>Example 2. Fixed</caption>
<tr>
<th>Name</th>
<td>Murad Mustafa</td>
</tr>
<tr>
<th>Email</th>
<td>murad.sh.m@gmail.com</td>
</tr>
</table>
<p class="note"> <strong>ملاحظة:</strong> يمكننا أن نرى أن عرض خلية الجدول لم تتغير لاستيعاب المحتوى عند استخدام القيمة <code>fixed</code> للخاصية <code>table-layout</code></p>
</body>
</html>
المخرجات
يمكننا تحسين أداء عرض الجدول من خلال تحديد القيمة fixed لخاصية table-layout. تؤدي القيمة fixed لهذه الخاصية إلى عرض تسريع الجدول داخل متصفح الويب وذلك بعرض الصفوف واحد تلو الاخر ، مما يوفر للمستخدمين المعلومات بوتيرة أسرع.
بدون استخدام القيمة fixed للخاصية table-layout في الجداول الكبيرة ، لن يرى المستخدمون أي جزء من الجدول حتى يقوم المتصفح بمعالجة الجدول بأكمله.
محاذاة النص داخل خلايا الجدول
يمكنك محاذاة محتوى النص داخل خلايا الجدول إما أفقيًا أو رأسيًا.
المحاذاة الأفقية لمحتويات الخلية
للمحاذاة النص افقيا داخل خلايا الجدول ، يمكنك استخدام الخاصية text-align بنفس الطريقة المستخدمة مع العناصر الأخرى. والقيم لهذه الخاصية هي left و right و center و justify.
في المثال التالي سنقوم بمحاذاة النص داخل عناصر <th> إلى اليسار.
<!DOCTYPE html>
<html>
<head>
<title>المحاذاة الأفقية لمحتويات الخلية</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #dee2e6;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
تتم محاذاة النص الموجود داخل عناصر <td> بشكل افتراضي إلى اليسار ، بينما تكون محاذاة النص الموجود داخل عناصر <th> إلى الوسط ويظهر بخط غامق بشكل افتراضي.
المحاذاة الرأسية لمحتويات الخلية css
وبالمثل ، يمكننا محاذاة محتوى الخلايا رأسيًا داخل عنصري <th> و <td> بإستخدام القيم top أو bottom أو middle للخاصية vertical-align من لغة CSS. القيمة الافتراضية لهذه الخاصية هي middle .
في المثال التالي سنقوم بمحاذاة النص داخل عناصر <th> رأسيًا إلى الاسفل.
<!DOCTYPE html>
<html>
<head>
<title>المحاذاة الرأسية لمحتويات الخلية</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
border: 1px solid #dee2e6;
}
th {
height: 40px;
vertical-align: bottom;
}
</style>
</head>
<body>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
التحكم في موضع عنوان الجدول Table Caption
يمكننا تحديد موضع عنوان الجدول (تسمية الجدول) باستخدام الخاصية caption-side من لغة CSS.
يمكننا وضع عنوان الجدول إما في أعلى أو أسفل الجدول. الموضع الافتراضي هو في الأعلى.
<!DOCTYPE html>
<html>
<head>
<title>التحكم في موضع عنوان الجدول</title>
<style>
table, td, th {
border: 1px solid gray;
}
caption {
caption-side: bottom;
}
</style>
</head>
<body>
<table>
<caption>Table 1.0 - User Details</caption>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</table>
</body>
</html>
المخرجات
لتغيير المحاذاة الأفقية لنص عنوان الجدول (على سبيل المثال إلى اليسار أو اليمين) ، يمكننا ببساطة استخدام الخاصية text-align من لغة CSS ، كما نتعامل مع النص العادي.
التعامل مع الخلايا الفارغة في الجداول
في الجداول التي لها حدود منفصل (الوضع افتراضي) ، يمكننا أيضًا التحكم في عرض الخلايا التي ليس لها محتوى داخل متصفح الويب باستخدام الخاصية empty-cells .
تقبل هذه الخاصية القيمة show او hide. القيمة الافتراضية لهذه الخاصية هي show ، والتي تعرض الخلايا الفارغة مثل الخلايا العادية ، ولكن إذا تم تحديد القيمة ب hide، فلن يتم رسم حدود أو خلفيات حول الخلايا الفارغة. دعنا نجرب مثالًا لفهم كيفية عمله حقًا:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>التعامل مع الخلايا الفارغة في الجداول</title>
<style>
table {
width: 300px;
border-collapse: separate;
}
table, th, td{
border: 1px solid #000000;
}
table.empty-show {
empty-cells: show;
}
table.empty-hide {
empty-cells: hide;
}
</style>
</head>
<body>
<h2>Table with Empty-cells</h2>
<table class="empty-show">
<tr>
<th>Name</th>
<td>Murad Mustafa</td>
</tr>
<tr>
<th>Email</th>
<td></td>
</tr>
</table>
<br>
<h2>Table with Hidden Empty-cells</h2>
<table class="empty-hide">
<tr>
<th>Name</th>
<td>Murad Mustafa</td>
</tr>
<tr>
<th>Email</th>
<td></td>
</tr>
</table>
</body>
</html>
المخرجات
إن وضع رمز المسافة داخل خلية الجدول يجعلها غير فارغة. و حتى لو بدت تلك الخلية فارغة ، فإن القيمة hide لن تخفي الحدود والخلفيات.
إنشاء جداول مخططة
يعد تحديد ألوان خلفية مختلفة للصفوف المتعاقبة أسلوبًا شائعًا لتحسين إمكانية قراءة الجداول التي تحتوي على كمية كبيرة من البيانات.
يمكننا ببساطة تحقيق هذا التأثير باستخدام المحدد :nth-child() من نوع المحددات pseudo-class.
في المثال التالي سنقوم بإبراز كل الصفوف الفردية داخل الجدول .
<!DOCTYPE html>
<html>
<head>
<title>إنشاء جداول مخططة</title>
<style>
table {
width: 100%;
font-family: arial, sans-serif;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border-top: 1px solid #dee2e6;
}
tbody tr:nth-child(odd) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Murad</td>
<td>35</td>
</tr>
<tr>
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr>
<tr>
<td>3</td>
<td>Kamal</td>
<td>33</td>
</tr>
<tr>
<td>4</td>
<td>Maryam</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
المخرجات
عادةً ما يشبه الجدول المخطط في المثال السابق الصورة التالية.
جعل الجداول متجاوبة للعرض على اجهزة مختلفة
الجداول وبشكل افتراضي لا تكون متجاوبة للعرض على اجهزة مختلفة. ولدعم الأجهزة المحمولة ، يمكننا إضافة التجاوب لجداولك من خلال اضافة خاصية التمرير الأفقي على الشاشات الصغيرة. وللقيام بذلك سنقوم بإحاطة عنصر الجدول بعنصر <div> وتطبيق النمط overflow-x: auto عليه كما هو مبين في المثال التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>جعل الجداول متجاوبة للعرض على اجهزة مختلفة</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 8px;
text-align: left;
border: 1px solid #dee2e6;
white-space: nowrap; /* to prevent text wrapping */
}
.responsive-table {
overflow-x: auto;
}
</style>
</head>
<body>
<div class="responsive-table">
<table>
<thead>
<tr>
<th>ID</th>
<th>Supplier</th>
<th>Contact Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Exotic Liquids</td>
<td>Charlotte Cooper</td>
<td>49 Gilbert St.</td>
<td>London</td>
<td>EC1 4SD</td>
<td>UK</td>
<td>(171) 555-2222</td>
</tr>
<tr>
<td>2</td>
<td>New Orleans Cajun Delights</td>
<td>Shelley Burke</td>
<td>P.O. Box 78934</td>
<td>New Orleans</td>
<td>70117</td>
<td>USA</td>
<td>(100) 555-4822</td>
</tr>
<tr>
<td>3</td>
<td>Grandma Kellys Homestead</td>
<td>Regina Murphy</td>
<td>707 Oxford Rd.</td>
<td>Ann Arbor</td>
<td>48104</td>
<td>USA</td>
<td>(313) 555-5735</td>
</tr>
<tr>
<td>4</td>
<td>Tokyo Traders</td>
<td>Yoshi Nagase</td>
<td>9-8 Sekimai Musashino-shi</td>
<td>Tokyo</td>
<td>100</td>
<td>Japan</td>
<td>(03) 3555-5011</td>
</tr>
<tr>
<td>5</td>
<td>Mayumis</td>
<td>Mayumi Ohno</td>
<td>92 Setsuko Chuo-ku</td>
<td>Osaka</td>
<td>545</td>
<td>Japan</td>
<td>(06) 431-7877</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
المخرجات
