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

في 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 في الجدول نفسه لإنشاء تخطيطات معقّدة. تذكّر فقط ضبط عدد الخلايا في كل صف وفقًا لذلك لاستيعاب الخلايا الممتدّة.