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

في 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 لإظهار أن Alex يعمل في كل من النوبتين الصباحية والمسائية دون تكرار الاسم. 

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