دمج الصفوف والأعمدة

في HTML، يمكنك جعل خلايا الجدول تمتد عبر عدة صفوف أو أعمدة باستخدام السمتين rowspan وcolspan. تتيح لك هاتان السمتان إنشاء تخطيطات أكثر تعقيدًا للجداول من خلال دمج الخلايا معًا.

تُستخدم السمة colspan لتحديد عدد الأعمدة التي ينبغي أن تمتد إليها الخلية. تُضاف إلى وسم <td> أو <th> للخلية التي تريد توسيعها.

إليك مثالًا على كيفية استخدام colspan:

<table border="1">
	<tr>
		<th colspan="2">Name</th>
	</tr>
	<tr>
		<td>John</td>
		<td>Doe</td>
	</tr>
</table>

في هذا المثال، تمتد خلية العنوان التي تحتوي على النص "Name" على عمودين. وهذا مفيد لإنشاء عنوان يغطي عدة أعمدة. هكذا يبدو:

تُستخدم السمة rowspan لتحديد عدد الصفوف التي ينبغي أن تمتد إليها الخلية. وتُضاف أيضًا إلى وسم <td> أو <th> الخاص بالخلية التي تريد توسيعها.

إليك مثالًا على كيفية استخدام rowspan:

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Shift</th>
  </tr>
  <tr>
    <td rowspan="2">Alex</td>
    <td>Morning</td>
  </tr>
  <tr>
    <td>Evening</td>
  </tr>
</table>

هنا، يُستخدم rowspan لإظهار أن أليكس يعمل في نوبتي الصباح والمساء دون تكرار الاسم. 

يمكنك استخدام كلٍّ من colspan وrowspan في الجدول نفسه لإنشاء تخطيطات معقدة. تذكّر فقط تعديل عدد الخلايا في كل صف بما يتناسب مع الخلايا الممتدة.