شرح CSS border color مع استخدام border shorthand

شَرْحُ خَصَائِصِ تَنْسِيقِ الجَدَاوِلِ فِي CSS مَعَ الأَمْثِلَةِ (CSS Table Styling)

فِي هَذَا الدَّلِيلِ المُتَكَامِلِ مِنْ كُورْسِ تَعَلُّمِ لُغَةِ CSS مِنَ الصِّفْرِ، سَنَتَعَرَّفُ عَلَى كَيْفِيَّةِ تَنْسِيقِ الجَدَاوِلِ بِاسْتِخْدَامِ خَصَائِصِ التَّصْمِيمِ المُخْتَلِفَةِ. سَنَتَنَاوَلُ كُلَّ خَاصِّيَّةٍ مَعَ شَرْحٍ مِعْمَارِيٍّ مُفَصَّلٍ وَمِثَالٍ عَمَلِيٍّ يُوَضِّحُ كَيْفِيَّةَ تَعْدِيلِهَا. هَذِهِ الخَصَائِصُ تُسَاعِدُكَ عَلَى جَعْلِ الجَدَاوِلِ مُنَظَّمَةً، اِحْتِرَافِيَّةً، وَمُتَجَاوِبَةً (Responsive) مَعَ جَمِيعِ شَاشَاتِ الهَوَاتِفِ وَالحَوَاسِيبِ.

---

1. خَاصِّيَّةُ border (الحُدُودُ)

تُسْتَخْدَمُ خَاصِّيَّةُ border لِإِضَافَةِ حُدُودٍ هَنْدَسِيَّةٍ لِلْجَدْوَلِ أَوْ لِلْخَلَايَا الدَّاخِلِيَّةِ بِهِ. يُمْكِنُكَ تَحْدِيدُ سَمَاكَةِ الحُدُودِ بِالبِكْسِلِ (px)، وَنَوْعِ الخَطِّ مِثْلَ: (solid لِلْمُصْمَتِ، dashed لِلْمُتَقَطِّعِ، dotted لِلْنُّقَطِيِّ)، بِالإِضَافَةِ إِلَى تَعْيِينِ اللَّوْنِ المُنَاسِبِ.

/* إِضَافَةُ حُدُودٍ لِلْجَدْوَلِ وَرَأْسِ المَجْمُوعَةِ وَالخَلَايَا */
table, th, td {
    border: 1px solid #000000;
}

---

2. خَاصِّيَّةُ border-collapse (دَمْجُ الحُدُودِ)

تُحَدِّدُ هَذِهِ الخَاصِّيَّةُ مَا إِذَا كُنْتَ تُرِيدُ عَرْضَ الحُدُودِ بَيْنَ الخَلَايَا مُنْفَصِلَةً عَنْ بَعْضِهَا، أَوْ مَدْمُوجَةً فِي خَطٍّ وَاحِدٍ مُشْتَرَكٍ. القِيمَةُ الاِفْتِرَاضِيَّةُ لِلْمُتَصَفِّحَاتِ هِيَ separate (مُنْفَصِلَةٌ)، وَلَكِنَّ المَظْهَرَ الاِحْتِرَافِيَّ يَتَطَلَّبُ دَمْجَهَا:

table {
    border-collapse: collapse; /* دَمْجُ الحُدُودِ الثُّنَائِيَّةِ فِي خَطٍّ وَاحِدٍ */
}

---

3. خَاصِّيَّةُ border-spacing (المَسَافَاتُ البَيْنِيَّةُ)

تُسْتَخْدَمُ هَذِهِ الخَاصِّيَّةُ لِتَحْدِيدِ الفَرَاغِ المِسَاحِيِّ بَيْنَ حُدُودِ الخَلَايَا عِنْدَمَا تَكُونُ الحُدُودُ مُنْفَصِلَةً. تَنْبِيهٌ هَامٌّ: لَنْ تَعْمَلَ هَذِهِ الخَاصِّيَّةُ نِهَائِيًّا إِذَا كَانَتْ قِيمَةُ الـ border-collapse هِيَ collapse.

table {
    border-collapse: separate;
    border-spacing: 15px; /* مَسَافَةُ 15 بِكْسِلْ بَيْنَ الخَلَايَا */
}

---

4. خَاصِّيَّتَا width وَ height (العَرْضُ وَالارْتِفَاعُ)

تُسْتَخْدَمُ هَذِهِ الخَصَائِصُ لِتَحْدِيدِ الحَجْمِ الهَنْدَسِيِّ لِلْجَدْوَلِ كَامِلًا أَوْ لِخَلَايَا مُعَيَّنَةٍ. يَجِبُ الِانْتِبَاهُ إِلَى أَنَّ هَذِهِ الأَبْعَادَ لَا تَشْمَلُ المِسَاحَاتِ الدَّاخِلِيَّةِ (Padding) أَوْ الحُدُودِ (Border) إِلَّا إِذَا تَمَّ تَفْعِيلُ box-sizing: border-box;.

table {
    width: 100%; /* جَعْلُ الجَدْوَلِ يَمْتَدُّ بِعَرْضِ الشَّاشَةِ كَامِلًا */
}

th {
    height: 70px; /* تَعْيِينُ اِرْتِفَاعٍ كَبِيرٍ لِصَفِّ العَنَاوِينِ */
}

---

5. خَاصِّيَّتَا text-align وَ vertical-align (المُحَاذَاةُ)

تَسْمَحُ لَكَ هَذِهِ الأَدَوَاتُ بِتَوْجِيهِ النُّصُوصِ وَالعَنَاصِرِ دَاخِلَ مِسَاحَةِ الخَلِيَّةِ فِي اتِّجَاهَيْنِ مُخْتَلِفَيْنِ:

• text-align: تَتَحَكَّمُ فِي المُحَاذَاةِ الأُفُقِيَّةِ لِلْنَّصِّ، وَأَبْرَزُ قِيَمِهَا: (right لِلْيَمِينِ، left لِلْيَسَارِ، center لِلْوَسَطِ).
• vertical-align: تَتَحَكَّمُ فِي المُحَاذَاةِ العَمُودِيَّةِ لِلْمُحْتَوَى دَاخِلَ ارْتِفَاعِ الخَلِيَّةِ، وَقِيَمُهَا هِيَ: (top لِلْأَعْلَى، middle لِلْمُنْتَصَفِ، bottom لِلْأَسْفَلِ).

td {
    text-align: center;      /* تَوَسُّطُ النَّصِّ أُفُقِيًّا */
    vertical-align: middle;  /* تَوَسُّطُ النَّصِّ عَمُودِيًّا */
}

---

6. خَاصِّيَّةُ padding (الفَرَاغُ الدَّاخِلِيُّ)

تُعْتَبَرُ خَاصِّيَّةُ padding الأَدَاةَ الأَهَمَّ لِجَعْلِ الجَدْوَلِ مُرِيحًا لِلْعَيْنِ؛ حَيْثُ تُضِيفُ مِسَاحَةً فَرَاغِيَّةً دَاخِلِيَّةً بَيْنَ النَّصِّ وَحُدُودِ الخَلِيَّةِ، مِمَّا يَمْنَعُ تَكَدُّسَ الكَلِمَاتِ وَيُسَهِّلُ عَمَلِيَّةَ القِرَاءَةِ.

th, td {
    padding: 15px; /* إِيجَادُ فَرَاغٍ بِمِقْدَارِ 15 بِكْسِلْ مِنْ كُلِّ الجَوَانِبِ */
}

---

7. خَاصِّيَّةُ border-bottom (الحُدُودُ السُّفْلِيَّةُ)

إِذَا كُنْتَ لَا تَرْغَبُ فِي وُجُودِ شَبَكَةِ حُدُودٍ كَامِلَةٍ حَوْلَ كُلِّ خَلِيَّةٍ، يُمْكِنُكَ اِسْتِخْدَامُ border-bottom لِرَسْمِ خَطٍّ سُفْلِيٍّ فَقَطْ تَحْتَ الصُّفُوفِ، وَهُوَ أُسْلُوبٌ عَصْرِيٌّ شَائِعٌ جِدًّا فِي تَنْسِيقِ المَوَاقِعِ التَّقْنِيَّةِ.

th, td {
    border-bottom: 1px solid #dddddd; /* خَطٌّ سُفْلِيٌّ رَمَادِيٌّ نَاعِمٌ */
}

---

8. تَأْثِيرُ Pseudo-class :hover (التَّفَاعُلُ عِنْدَ التَّمْرِيرِ)

تُسْتَخْدَمُ الفِئَةُ الزَّائِفَةُ :hover لِتَغْيِيرِ مَظْهَرِ أَوْ لَوْنِ صَفٍّ بِكَامِلِهِ عِنْدَمَا يَقُومُ المُسْتَخْدِمُ بِمُرُورِ فِأَرَةِ الحَاسُوبِ فَوْقَهُ. هَذِهِ اللَّمْسَةُ تَجْعَلُ الجَدْوَلَ دِينَامِيكِيًّا وَتُسَاعِدُ القَارِئَ عَلَى تَتَبُّعِ السَّطْرِ الَّذِي يَقْرَؤُهُ.

tr:hover {
    background-color: #f5f5f5; /* تَحَوُّلُ خَلْفِيَّةِ الصَّفِّ إِلَى لَوْنٍ رَمَادِيٍّ خَفِيفٍ */
}

---

9. اسْتِخْدَامُ :nth-child(even) وَ :nth-child(odd) (تَبَادُلُ الأَلْوَانِ)

تُسْتَخْدَمُ هَذِهِ الطَّرِيقَةُ لِتَطْبِيقِ أَلْوَانٍ مُخْتَلِفَةٍ عَلَى الصُّفُوفِ الزَّوْجِيَّةِ (even) أَوْ الفَرْدِيَّةِ (odd). يُسَمَّى هَذَا التَّصْمِيمُ بـ "Zebra Striping"، وَهُوَ مِعْيَارٌ اِحْتِرَافِيٌّ لِتَسْهِيلِ قِرَاءَةِ الجَدَاوِلِ المَلِيئَةِ بِالأَرْقَامِ الكَثِيرَةِ.

/* تَلْوِينُ الصُّفُوفِ الزَّوْجِيَّةِ */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* تَلْوِينُ الصُّفُوفِ الفَرْدِيَّةِ */
tr:nth-child(odd) {
    background-color: #ffffff;
}

---

10. خَاصِّيَّةُ color (لَوْنُ النَّصِّ)

تُسْتَخْدَمُ خَاصِّيَّةُ color لِتَعْيِينِ لَوْنِ الحُرُوفِ وَالنُّصُوصِ دَاخِلَ الخَلَايَا، وَيُمْكِنُكَ اِخْتِيَارُ الأَلْوَانِ بِالِاسْمِ المَعْرُوفِ أَوْ بِاعْتِمَادِ أَنْظِمَةِ الأَلْوَانِ الدَّقِيقَةِ مِثْلَ HEX أَوْ RGB.

td {
    color: #1a0dab; /* تَعْيِينُ لَوْنٍ كُحْلِيٍّ مُحَدَّدٍ لِلْنَّصِّ */
}

---

11. خَاصِّيَّةُ overflow-x (التَّجَاوُبُ مَعَ الشَّاشَاتِ)

عِنْدَمَا يَحْتَوِي الجَدْوَلُ عَلَى أَعْمِدَةٍ كَثِيرَةٍ وَيُصْبِحُ عَرِيضًا جَدًّا، فَإِنَّهُ قَدْ يَتَسَبَّبُ فِي تَشْوِيهِ مَظْهَرِ الهَاتِفِ. لِحَلِّ هَذِهِ المُشْكِلَةِ، نَقُومُ بِتَغْلِيفِ الجَدْوَلِ كَامِلًا دَاخِلَ عُنْصُرِ <div> نَمْنَحُهُ خَاصِّيَّةَ التَّمْرِيرِ الأُفُقِيِّ التِّلْقَائِيِّ:

.table-container {
    overflow-x: auto; /* إِظْهَارُ شَرِيطِ تَمْرِيرٍ أُفُقِيٍّ فَقَطْ عِنْدَمَا تَصْغُرُ الشَّاشَةُ */
}

---

مِثَالٌ شَامِلٌ عَلَى جَدْوَلٍ مُنَسَّقٍ بِالكَامِلِ

إِلَيْكَ الهَيْكَلَ المُتَكَامِلَ لِتَطْبِيقِ كُلِّ هَذِهِ المَعَايِيرِ فِي شِيفْرَةٍ وَاحِدَةٍ جَاهِزَةٍ لِلِاسْتِخْدَامِ:

الِاسْمُ	العُمْرُ	المَدِينَةُ
أَحْمَدُ	25	القَاهِرَةُ
مُنَى	30	الإِسْكَنْدَرِيَّةُ
خَالِدٌ	28	الجِيزَةُ

<!-- بِنْيَةُ التَّغْلِيفِ فِي الـ HTML -->
<div class="table-container">
  <table>
    <tr>
      <th>الِاسْمُ</th>
      <th>العُمْرُ</th>
      <th>المَدِينَةُ</th>
    </tr>
    <tr>
      <td>أَحْمَدُ</td>
      <td>25</td>
      <td>القَاهِرَةُ</td>
    </tr>
    <tr>
      <td>مُنَى</td>
      <td>30</td>
      <td>الإِسْكَنْدَرِيَّةُ</td>
    </tr>
    <tr>
      <td>خَالِدٌ</td>
      <td>28</td>
      <td>الجِيزَةُ</td>
    </tr>
  </table>
</div>

---

الخُلَاصَةُ

لَقَدْ تَعَلَّمْنَا فِعْلِيًّا كَيْفِيَّةَ السَّيْطَرَةِ الكَامِلَةِ عَلَى مَظْهَرِ الجَدَاوِلِ بِاسْتِخْدَامِ أَدَوَاتِ التَّنْسِيقِ الحَدِيثَةِ. مِثْلَ دَمْجِ الحُدُودِ، وَتَوْزِيعِ الفَرَاغَاتِ الدَّاخِلِيَّةِ (Padding)، وَتَأْثِيرَاتِ التَّفَاعُلِ المُلَوَّنَةِ، بِالإِضَافَةِ إِلَى تَأْمِينِ التَّجَاوُبِ المَرِنِ مَعَ الشَّاشَاتِ الضَّيِّقَةِ عَبْرَ الحَاوِيَاتِ المُرِنَةِ. اِسْتَثْمِرْ هَذِهِ المَعْلُومَاتِ لِبِنَاءٍ جَدَاوِلَ بَيَانَاتٍ اِحْتِرَافِيَّةٍ تَرْفَعُ مِنْ كَفَاءَةِ مَوْقِعِكَ الإِجْمَالِيَّةِ.