colspan অ্যাট্রিবিউট

colspan অ্যাট্রিবিউটটি HTML টেবিলের কলামগুলিকে একত্রিত করে নিয়ন্ত্রণ করে। th এবং td ট্যাগগুলিতে প্রয়োগ করা হয়।

গ্রহণযোগ্য মান: 1 থেকে শুরু করে পূর্ণসংখ্যা।

কিভাবে ব্যবহার করবেন: আমরা যেকোনো td বা th সেলে এই অ্যাট্রিবিউট যোগ করি। যদি, উদাহরণস্বরূপ, colspan কে 2 মানে সেট করা হয় - তাহলে যে সেলে এটি সেট করা হয়েছে, তা টেবিলের দুটি কলাম দখল করবে। একই সময়ে, ডানদিকের সংলগ্ন সেলগুলি কোথাও যাবে না, আমাদের প্রসারিত সেলটি সেগুলিকে সরিয়ে দেবে এবং টেবিলটি ভেঙে পড়বে। এটি যাতে না ঘটে, তার জন্য ডানদিকে একটি সেল মুছে ফেলতে হবে। ভালোভাবে বোঝার জন্য উদাহরণগুলি দেখুন।

উদাহরণ . একত্রিতকরণ ছাড়া টেবিল

আসুন একটি একত্রিতকরণ ছাড়া টেবিল দেখি, যার সাথে আমরা পরে কাজ করব:

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

উদাহরণ . সেলটিকে দুটি কলামে প্রসারিত করা

আসুন 1 নম্বর সেলটিকে দুটি কলামে প্রসারিত করার চেষ্টা করি, এটিকে colspan অ্যাট্রিবিউট 2 মানে সেট করে। একই সময়ে, এটি ডানদিকের সেলগুলিকে সরিয়ে দেবে এবং টেবিলটি ভেঙে পড়বে:

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

উদাহরণ . টেবিল ভাঙা ছাড়াই সেলটিকে প্রসারিত করা

এখন আগের উদাহরণ থেকে টেবিল ভাঙার সমস্যা ঠিক করার চেষ্টা করি, আমাদের সেলের ডানদিকের একটি সেল মুছে ফেলি (এটি 2 বা 3 নম্বর সেল - কোনটি不重要):

html<table>
  <tr>
    <td colspan="2">cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

উদাহরণ . সেলটিকে তিনটি কলামে প্রসারিত করা

আসুন 1 নম্বর সেলটিকে 3টি কলামে প্রসারিত করি এবং এটিকে colspan অ্যাট্রিবিউট 3 মানে সেট করি। একই সময়ে, টেবিলটি যাতে না ভাঙে তার জন্য ডানদিকে আরও একটি সেল মুছে ফেলি:

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

উদাহরণ . একই সাথে colspan এবং rowspan

আসুন 4, 5, 7 এবং 8 নম্বর সেলগুলি একত্রিত করার চেষ্টা করি, colspan এবং rowspan অ্যাট্রিবিউট ব্যবহার করে (টেবিল থেকে আগের একত্রিতকরণগুলি সরিয়ে ফেলুন):

html<table>
  <tr>
    <td colspan="3">cell1</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

আরও দেখুন