CSS Table Alignment
-
في هذا الدرس نتعرف على كيفية محاذاة النص بشمل افقي Horizontal Alignment في الجداول باستخدام الامر : text-align
يمكن تطبيق هذه الخاصية على الجدول كامل او الاعمدة <th> او الصفوف <tr> او <th>. والوضع الافتراضي يكون محتويات <th> تكون المحاذة بالوسط center-aligned بينما <td> تكون المحاذة الى اليسار left-aligned
تمام خلونا نعمل تعديل على الصفحة 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;
height: 50px;
text-align: center;
}
#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: center;
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>
شغل الصفحة ونشوف النتيجة (الصورة)
لاحظ ان جميع النصوص في الجدول تم محاذاتها الى الوسط
المحاذاة العمودية Vertical Alignment
يتم في هذه المحاذاة التحكم بمكان محتوي td او th بحيث يتم المحاذاة الى (أعلى top ، اسفل bottom ، وسط middle)
نستخدم الامر
vertical-align
الوضع الافتراضي لهذا النوع من المحاذاة هي اسفل middle لكل من td او th
نعدل على المثال السابق الى :
<!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;
text-align: center;
vertical-align:bottom;
}
#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: center;
vertical-align:top;
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>
شغل الصفحة وشوف النتيجة :
لاحظ المحاذاة في td الى اسفل وفي th الى اعلى
اترك تعليقك