HTML Table Borders and Sizes
-
في هذه المقالة بنتعرف على تطبيق الحدود Borders في الجدول في HTML، بنحكي عن الطرق المختلفة لتنفيذها وتغير النمط Style، ويمكن تطبيق Border على أي جزء من الجدول ممكن الجدول كامل او ممكن Cell او Row
تطبيق Border
الوضع الافتراضي عند إضافة Border للجدول يتم تطبيق ذلك على جميع الجدول بما في ذلك Rows and Cells
لإضافة Border للجدول بنحتاج الى إضافة CSS Code، وحتى نعرف كيف طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table, th, td {
border:1px solid black;
}
th {
background-color: gray;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th>نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
شوف النتيجة:
تمام هيك الوضع ممتاز.
طيب نرجع للكود ونحاول نفهم شو عملنا.
طبقنا الكود التالي:
table, th, td {
border:1px solid black;
}
th {
background-color: gray;
}في البداية طبقنا كود CSS على الجدول كامل بالإضافة الى td,th بحيث يتم إضافة Border بحجم 1px ونوع Solid ولون اسود
الكود التالي طبقنا فقط على th وهو Header الجدول، بحيث يتم إضافة لون خلفيه بلون Gray
تمام لاحظ نتيجة التنفيذ ان border بينعرض على شكل مزدوج.
طيب كيف ممكن نشيل هذا النمط. الحل باستخدام Collapsed
تطبيق Collapsed في الجدول
طبق الكود التالي على المثال السابق وشوف النتيجة:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th>نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
النتيجة
تمام التمام
تطبيق لون خلفيه على Cells في الجدول.
تعملنا سابقا كيف ممكن نطبق لون الخلفية على header طيب شو لو المطلوب نطبق على <td> . الموضوع بسيط جدا
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th>نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
النتيجة :
طبقا الكود التالي فقط على td :
td {
background-color: gainsboro;
}ممكن نطبق مجموعة كبيرة من الخصائص على Border وهذا كلو موجود في CSS
تطبيق اللون على Border
لتطبيق لون على Border بنستخدم
border-color: brown;
وطبعا اكيد حسب الحاجة في التطبيق بتم الاستعمال يعني ممكن يطبق على جميع الجدول وممكن فقط على header
لتطيق على جميع الجدول بكون الكود:
table, th, td {
border:1px solid black;
border-collapse: collapse;
border-color: brown;
}لتطبيق على header بكون الكود
th {
background-color: gray;
border-color: brown;
}حجم الجدول Table Size
يمكن التحكم بحجم الجدول باستخدام الخصائص width وheight
مثال :
تطبيق width بعرض الصفحة كاملة
لعرض الجدول بحجم الصفحة كاملة بنكتب width يساوي 100%
طبق الكود التالي في صفحة HTML
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
width: 100%;
}
th {
background-color: gray;
border-color: brown;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th>نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
النتيجة:
واكيد هذا الكلام بنطبق على أي جزء من الجدول يعني ممكن نطبق العرض على header معين.
طبق الكود التالي لفهم كيف:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th >نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
في هذ الكود طبقا العرض على الجدول كامل باستخدام الكود:
table{
width: 100%;
} وبعد هيك طبقنا العرض على th باستخدام الكود:
th {
background-color: gray;
border-color: brown;
width: 50%;
}النتيجة:
<!DOCTYPE html>
<html>
<head>
<title>My favicon Icon</title>
<link rel="icon" type="image/x-icon" href="favicon.jpg">
<style>
table{
width: 100%;
height: 100vh;
}
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
th {
background-color: gray;
border-color: brown;
width: 50%;
}
td {
background-color: gainsboro;
}
</style>
</head>
<body>
<table dir="rtl">
<tr><th >نوع السيارة</th><th>الموديل</th></tr>
<tr>
<td>BMW</td>
<td>2022</td>
</tr>
<tr>
<td>Mercedes</td>
<td>2021</td>
</tr>
<tr>
<td>Honda</td>
<td>2022</td>
</tr>
</table>
</body>
</html>
height: 100vh;
اترك تعليقك