Changing Column Width

الآن وبعد أن استخدمنا كل المصطلحات بطريقة صحيحة ربما تريد تغيير عرض كل عمود - وفي الوضع الحالي، كل عمود عرضه يمثل 33% من الجدول. دعنا نقول أننا نريد عرض العمود الأول ليكون 40% من الجدول ويكون عرض العمودين التاليين هو 30%(حيث 40%+30%+30%=100%)

حتى يمكن أن نقوم بذلك، نستخدم عنصر العمود أو (col) لتعريف عرض الأعمدة. ويجب أن نعرف أن عنصر تعريف العمود هو عنصر قائم بذاته لذلك أنت تحتاج إلى تعريف لكل عمود من الجدول. دعنا نرى الآن مثال تطبيقي:

<table border="1" width="100%">
	<col style="width:40%">
	<col style="width:30%">
	<col style="width:30%">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>
		<th>Vitamin C</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th>Apples</th>
		<td>98 ui</td>
		<td>8.4 mg</td>
	</tr>
	<tr>
		<th>Oranges</th>
		<td>295 ui</td>
		<td>69.7 mg</td>
	</tr>
	<tr>
		<th>Bananas</th>
		<td>76 ui</td>
		<td>10.3 mg</td>
	</tr>
	</tbody>
</table>

بهذه الطريقة، يمكنك التحكم في عرض الأعمدة في الجدول. وقد قمت (في المثال) باستخدام وصف الاستايل للعمود مع قيمة عرض العمود "العرض 40%" كمثال، ولكن في الحالة المثالية، يجب أن يكون ذلك ضمن ملف الاستايل بصورة منفصلة، حيث أن ذلك يرتبط دائما بالطريقة التي يتم بها عرض الجدول ولا تخص مصطلحات البرمجة للجدول

وعندما تقوم باستخدام ملف الاستايل يمكنك إنشاء ثلاث خصائص حيث يمكنك وصف العرض لكل عمود من الثلاثة، ثم تستخدم علامات الفصل بين الخصائص علي النحو التالي:

<table border="1">
	<col class="column-one">
	<col class="column-two">
	<col class="column-three">
	<thead>
	<tr>
		<th>Fruits</th>
		<th>Vitamin A</th>

ماذا تعلمنا حتى الآن:

• كل جدول يبدأ وينتهي بعنصر وعلامة (table)
• لدمج أكثر من عامود أو صف في الجدول تستخدم مصطلح (pan) أو مدى
• ينقسم الجدول إلي عنوان أو صف للعنوان (thead) وحرف ال(t) في البداية يشير إلى ترجمة الجدول وجسم الجدول أو (body) ويعبر عنه (tbody)
• وبين عنصري العنوان والجسم الجدول ينقسم الجدول إلي صفوف يتم التعبير عنهابالعلامة (tr) حيث يمثل ال (r) ترجمة كلمة صف
• وباستخدام لغة HTML في وصف الجدول لا نقوم بتعريف العمود بحد ذاته، ولكن بدلا من ذلك نستخدم علامة (td) للتعبير عن كل خلية في الجدول بصورة منفصلة (الخلية هي المساحة بين الصف والعمود)
• وفي كل مرة تريد تعريف خلية لعنوان الجدول (head) استخدم عنصر (th) بدلا من عنصر (td)