CSS tables
-
في هذا الدرس نتعرف على إمكانيات CSS في التعامل مع الجداول، حيث يوفر CSS مجموعة كبيرة من الخصائص مثل borders، Collapse، Size، alignment، style ، Responsive .
تمام نعمل مثال حتى نفهم الموضوع بشكل أفضل:
نبدأ بإنشاء ملف HTML باسم table وبعدها نضيف الكود التالي:
<!DOCTYPE html>
<html>
<head>
<style>
#Student {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#Student td, #Student th {
border: 1px solid #ddd;
padding: 8px;
}
#Student tr:nth-child(even){background-color: #f2f2f2;}
#Student tr:hover {background-color: rgb(240, 235, 235);}
#Student th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: gray;
color: white;
}
h1{
text-align: right;
}
</style>
</head>
<body><h1>جدول الطلاب</h1><table id="Student">
<tr>
<th>Student #</th>
<th>Student Name</th>
<th>Address</th>
</tr>
<tr>
<td>00001</td>
<td>Layan Hatem</td>
<td>Jordan</td>
</tr>
<tr>
<td>00002</td>
<td>Lareen Hatem</td>
<td>Jordan</td>
</tr>
<tr>
<td>00003</td>
<td>Mlak Hatem</td>
<td>Jordan</td>
</tr>
</table>
</body>
</html>
شغل الصفحة ونشوف النتيجة (الصورة)
طيب نفهم الكود بشكل سريع:
عملنا كود للجدول باستخدام HTML وللذكير بكون طريقة عمل الجدول في HTML كالتالي
<table id="Student">
<tr>
<th>Column header Name</th>
</tr>
<tr>
<td> Column Data</td>
</tr>
</table>
الجدول عبارة عن عرض بيانات مجموعة من الطلاب.
بعد هيك طبقنا CSS على هذا الجدول،
أولا : اضفنا CSS Class باسم #Student وفي البداية حددنا نوع الخط ونوع Border من النوع collapse والعرض يساوي 100%
الكود:
#Student {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}بعد هيك عملنا CSS ل td و th وطبقنا الخصائص التالية عليهم :border بقيمة 1 ومن النوع Solid والون #ddd و Padding بقيمة 8px
الكود:
#Student td, #Student th {
border: 1px solid #ddd;
padding: 8px;
}بعد هيك عملنا CSS ل tr:nth-child الي هو السطر الثاني بعد كل سطر وحددنا لون الخلفية f2f2f2#
الكود:
#Student tr:nth-child(even){background-color: #f2f2f2;}بعد هيك طبقنا CSS لتغير لون الخلفية عند تحريك Mouse فوق السطر
الكود :
#Student tr:hover {background-color: rgb(240, 235, 235);}وبعد هيك طبقنا مجموعة من CSS على th مثل padding-top ، padding-bottom، لون الخلفية، لون الخط
الكود:
#Student th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: gray;
color: white;
}ملاحظة : طبقنا هنا Custom CSS بمعنى ان عملنا class بمواصفات معين وطبقنا هذا Class على الجدول ،
ممكن تستخدم اسم tag مباشرة لتطبيق خصائص CSS وفي هذه الحالة بكون table ،مثلا لو بدنا نطبق border على الأعمدة في الجدول بنكتب الكود بالشكل التالي :
table, td {
border: 1px solid;
}وأخيرا عملنا اتجاه النص في h1 من اليمين
الكود:
h1{
text-align: right;
}تمام
نطلب منك تطبيق الكود السابق وبعدها محاولة تغيير بعض خصائص CSS
مثال:
Table Borders
table, th, td {
border: 1px solid;
}
Full-Width Table
table {
width: 100%;
}
Collapse Table Borders
table {
border-collapse: collapse;
}
راسلنا في حال ما فهمت اشي او عندك ملاحظات
تغيير حجم الجدول
يمكن من خلال CSS التحكم بالطول والارتفاع للجدول width و height
نعدل على المثال السابق الى
<!DOCTYPE html>
<html>
<head>
<style>
#Student {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#Student td, #Student th {
border: 1px solid #ddd;
padding: 8px;
height: 50px;
}
#Student tr:nth-child(even){background-color: #f2f2f2;}
#Student tr:hover {background-color: rgb(240, 235, 235);}
#Student th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: gray;
color: white;
}
h1{
text-align: right;
}
</style>
</head>
<body><h1>جدول الطلاب</h1><table id="Student">
<tr>
<th>Student #</th>
<th>Student Name</th>
<th>Address</th>
</tr>
<tr>
<td>00001</td>
<td>Layan Hatem</td>
<td>Jordan</td>
</tr>
<tr>
<td>00002</td>
<td>Lareen Hatem</td>
<td>Jordan</td>
</tr>
<tr>
<td>00003</td>
<td>Mlak Hatem</td>
<td>Jordan</td>
</tr>
</table>
</body>
</html>
شغل الصفحة وشوف النتيجة:
اترك تعليقك