<!-- بداية كود الجدول المتعدد الألوان -->
...تابع القراءة
<style>
.sky-table-container {
width: 100%;
margin: 20px 0;
direction: rtl; /* اتجاه الكتابة من اليمين لليسار */
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.sky-multi-table {
width: 100%;
border-collapse: separate;
border-spacing: 0 8px; /* مسافة بين الصفوف */
}
.sky-multi-table tr {
transition: transform 0.2s;
}
.sky-multi-table tr:hover {
transform: scale(1.01); /* تأثير بسيط عند تمرير الماوس */
}
.sky-multi-table td {
padding: 15px;
color: #ffffff;
font-weight: bold;
}
/* تنسيق خلية العنوان */
.title-cell {
border-radius: 0 10px 10px 0;
text-align: right;
font-size: 16px;
}
/* تنسيق خلية التحميل */
.download-cell {
border-radius: 10px 0 0 10px;
text-align: center;
width: 100px;
}
.download-btn {
background: rgba(255, 255, 255, 0.2);
color: white;
text-decoration: none;
padding: 8px 15px;
border-radius: 5px;
border: 1px solid #fff;
transition: 0.3s;
display: inline-block;
}
.download-btn:hover {
background: #fff;
color: #333 !important;
}
/* ألوان الصفوف الـ 10 */
.row-1 { background-color: #e74c3c; } /* أحمر */
.row-2 { background-color: #3498db; } /* أزرق */
.row-3 { background-color: #2ecc71; } /* أخضر */
.row-4 { background-color: #f39c12; } /* برتقالي */
.row-5 { background-color: #9b59b6; } /* بنفسجي */
.row-6 { background-color: #1abc9c; } /* فيروزي */
.row-7 { background-color: #d35400; } /* برتقالي غامق */
.row-8 { background-color: #2c3e50; } /* رمادي غامق */
.row-9 { background-color: #c0392b; } /* أحمر غامق */
.row-10 { background-color: #27ae60; } /* أخضر غامق */
@media screen and (max-width: 480px) {
.title-cell { font-size: 14px; padding: 10px; }
.download-cell { width: 80px; padding: 10px; }
.download-btn { padding: 5px 10px; font-size: 12px; }
}
</style>
<div class="sky-table-container">
<table class="sky-multi-table">
<!-- صف 1 -->
<tr class="row-1">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 1</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 2 -->
<tr class="row-2">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 2</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 3 -->
<tr class="row-3">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 3</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 4 -->
<tr class="row-4">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 4</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 5 -->
<tr class="row-5">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 5</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 6 -->
<tr class="row-6">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 6</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 7 -->
<tr class="row-7">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 7</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 8 -->
<tr class="row-8">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 8</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 9 -->
<tr class="row-9">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 9</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
<!-- صف 10 -->
<tr class="row-10">
<td class="title-cell">هنا يكتب عنوان المادة أو الملف رقم 10</td>
<td class="download-cell"><a href="#" class="download-btn">تحميل</a></td>
</tr>
</table>
</div>
<!-- نهاية كود الجدول -->
المشاركات
