إرشادات التنسيق

مقدمة

• لا تحيط علامات <table> أو <h2> بعلامات <p> أو <div> .

• لا تستخدم وسم <center>...</center> بعد الآن. لتوسيط شيء ما، استخدم <div align="center">...</div> .

• لا تستخدم وسم <b>...</b> بعد الآن. لإضفاء جرأة على شيء ما، استخدم <strong>...</strong> .

• لا تستخدم وسم <i>...</i> بعد الآن. لكتابة نص مائل، استخدم <em>...</em> .

• استخدم فقط علامات <p>...</p> لإحاطة النص العاري.

• عند إضافة صورة داخل رابط إلى إصدار أكبر من تلك الصورة، استخدم <a class="trans" ... ><img ... ></a> .

• لإضافة رأس القسم:

  <h2>اسم الرأس</h2>

• لإضافة صورة معلقة على اليمين:

  <div class="image--right"><img src="..." /></div>

• لإضافة مربع لتنسيق عينات التعليمات البرمجية (كما هو موضح في هذه الصفحة):

  <قبل>
  	عينة الكود هنا
  </pre>
              

• لإضافة جدول بيانات ضيق بعرض 50%:

  <div class="box desk-50percent">
    <h3 class="box-title">عنوان الجدول</h3><!--/box-title-->
    <div class="box-content">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<تر>
  		<th class="data-heading">عنوان العمود 1</th>
  		<th class="data-heading">عنوان العمود 2</th>
  	</tr>
  	<تر>
  		<td class="left_aligned">يسار</td>
  		<td>الصف 1، العمود 2</td>
  	</tr>
  	<تر>
  		<td class="right_aligned">يمين</td>
  		<td>الصف 1، العمود 2</td>
  	</tr>
  	<تر>
  		<td class="centered">المركز</td>
  		<td>الصف 3، العمود 2</td>
  	</tr>
  	</table>
    </div><!--/box-content-->
  </div><!--/box-->
              

  سيؤدي الكود أعلاه إلى إنتاج الجدول المركزي التالي:

  عنوان الجدول

  عنوان العمود 1	عنوان العمود 2
  غادر	الصف 1، العمود 2
  يمين	الصف 1، العمود 2
  مركز	الصف 3، العمود 2

• لإضافة جدول بيانات بعرض 75%:

  <div class="box desk-75percent">
    <h3 class="box-title">عنوان الجدول</h3><!--/box-title-->
    <div class="box-content">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<تر>
  		<th class="data-heading">عنوان العمود 1</th>
  		<th class="data-heading">عنوان العمود 2</th>
  	</tr>
  	<تر>
  		<td class="left_aligned">يسار</td>
  		<td>الصف 1، العمود 2</td>
  	</tr>
  	<تر>
  		<td class="right_aligned">يمين</td>
  		<td>الصف 1، العمود 2</td>
  	</tr>
  	<تر>
  		<td class="centered">المركز</td>
  		<td>الصف 3، العمود 2</td>
  	</tr>
  	</table>
    </div><!--/box-content-->
  </div><!--/box-->
              

  سيؤدي الكود أعلاه إلى إنتاج الجدول المركزي التالي:

  عنوان الجدول

  عنوان العمود 1	عنوان العمود 2
  غادر	الصف 1، العمود 2
  يمين	الصف 1، العمود 2
  مركز	الصف 3، العمود 2

• لإضافة جدول بيانات قياسي بعرض 100%:

  <div class="box">
    <h3 class="box-title">عنوان الجدول</h3><!--/box-title-->
    <div class="box-content">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<تر>
  		<th class="data-heading">عنوان العمود 1</th>
  		<th class="data-heading">عنوان العمود 2</th>
  		<th class="data-heading">عنوان العمود 3</th>
  	</tr>
  	<تر>
  		<td class="left_aligned">يسار</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="right_aligned">يمين</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="centered">المركز</td>
  		<td>الصف 3، العمود 2</td>
  		<td>الصف 3، العمود 3</td>
  	</tr>
  	</table>
    </div><!--/box-content-->
  </div><!--/box-->
              

  سيؤدي الكود أعلاه إلى إنتاج الجدول المركزي التالي:

  عنوان الجدول

  عنوان العمود 1	عنوان العمود 2	عنوان العمود 3
  غادر	الصف 1، العمود 2	الصف 1، العمود 3
  يمين	الصف 1، العمود 2	الصف 1، العمود 3
  مركز	الصف 3، العمود 2	الصف 3، العمود 3

• لإضافة جدول بيانات كبير:

  <div class="box box--expandable">
    <h3 class="box-title">عنوان الجدول<span class="box-title-expand desk-visible">توسيع <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
    <div class="box-content">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<تر>
  		<th class="data-heading">عنوان العمود 1</th>
  		<th class="data-heading">عنوان العمود 2</th>
  		<th class="data-heading">عنوان العمود 3</th>
  	</tr>
  	<تر>
  		<td class="left_aligned">يسار</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="right_aligned">يمين</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="centered">المركز</td>
  		<td>الصف 3، العمود 2</td>
  		<td>الصف 3، العمود 3</td>
  	</tr>
  	</table>
    </div><!--/box-content-->
  </div><!--/box-->
              

  سيؤدي الكود أعلاه إلى إنتاج الجدول المركزي التالي:

  توسيع عنوان الجدول

  عنوان العمود 1	عنوان العمود 2	عنوان العمود 3
  غادر	الصف 1، العمود 2	الصف 1، العمود 3
  يمين	الصف 1، العمود 2	الصف 1، العمود 3
  مركز	الصف 3، العمود 2	الصف 3، العمود 3

• لإضافة جدول بيانات كبير الحجم:

  <div class="box box--expandable">
    <h3 class="box-title">عنوان الجدول<span class="box-title-expand desk-visible">توسيع <i class="fa-regular fa-arrow-right-long"></i></span></h3><!--/box-title-->
    <div class="box-content">
  	<table class="data" cellspacing="0" cellpadding="0" border="0">
  	<تر>
  		<th class="data-heading">عنوان العمود 1</th>
  		<th class="data-heading">عنوان العمود 2</th>
  		<th class="data-heading">عنوان العمود 3</th>
  	</tr>
  	<تر>
  		<td class="left_aligned">يسار</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="right_aligned">يمين</td>
  		<td>الصف 1، العمود 2</td>
  		<td>الصف 1، العمود 3</td>
  	</tr>
  	<تر>
  		<td class="centered">المركز</td>
  		<td>الصف 3، العمود 2</td>
  		<td>الصف 3، العمود 3</td>
  	</tr>
  	</table>
    </div><!--/box-content-->
  </div><!--/box-->
              

  سيؤدي الكود أعلاه إلى إنتاج الجدول المركزي التالي:

  توسيع عنوان الجدول

  عنوان العمود 1	عنوان العمود 2	عنوان العمود 3
  غادر	الصف 1، العمود 2	الصف 1، العمود 3
  يمين	الصف 1، العمود 2	الصف 1، العمود 3
  مركز	الصف 3، العمود 2	الصف 3، العمود 3

  لاحظ أسماء الفئات لمحاذاة رأس الجدول (th) أو خلية الجدول (td):

  • class="left_aligned" to left-align
  • class="right_aligned" لمحاذاة اليمين
  • class="centered" لمحاذاة المركز

  بشكل افتراضي، تتم محاذاة خلايا الجدول العادية إلى اليمين ، لتصغير حجم الكود عند عرض جداول كبيرة من البيانات الرقمية.

كتبه: Michael Shackleford