Row spanning in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the first table cell span 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 2</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Arow-start-2

Bcol-span-2

Crow-span-2

Dcol-start-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-2 which spans columns instead of rows.

Using row-start-2 which sets the start row but does not span.

The Tailwind class row-span-2 makes the cell span 2 rows vertically.

2fill in blank

medium

Complete the code to make the second cell in the first row span 3 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300">Row 1, Cell 1</td>
    <td class="border border-gray-300 [1]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 1</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 3, Cell 1</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Arow-span-3

Brow-span-2

Ccol-span-3

Dcol-span-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-3 which spans columns instead of rows.

Using a smaller span like row-span-2 which is not enough.

The class row-span-3 makes the cell span 3 rows vertically.

3fill in blank

hard

Fix the error in the code to correctly span the first cell over 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 2</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Arow-span-1

Brow-span-2

Ccol-span-2

Dcol-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-span-2 which spans columns.

Using row-span-1 which does not span multiple rows.

The correct class to span 2 rows is row-span-2. Other options either span columns or only 1 row.

4fill in blank

hard

Fill both blanks to make the first cell span 2 rows and the second cell span 2 columns using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300 [2]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 2, Cell 3</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Arow-span-2

Bcol-span-1

Ccol-span-2

Drow-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up row and column span classes.

Using col-span-1 which does not span multiple columns.

The first cell uses row-span-2 to span 2 rows vertically. The second cell uses col-span-2 to span 2 columns horizontally.

5fill in blank

hard

Fill all three blanks to create a table where the first cell spans 3 rows, the second cell spans 2 columns, and the third cell spans 2 rows using Tailwind CSS.

Tailwind

<table class="table-auto border-collapse border border-gray-400">
  <tr>
    <td class="border border-gray-300 [1]">Row 1, Cell 1</td>
    <td class="border border-gray-300 [2]">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td class="border border-gray-300 [3]">Row 2, Cell 3</td>
  </tr>
  <tr>
    <td class="border border-gray-300">Row 3, Cell 4</td>
  </tr>
</table>

Drag options to blanks, or click blank then click option'

Arow-span-3

Bcol-span-2

Crow-span-2

Dcol-span-1

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing row and column span classes.

Using wrong numbers for the span.

The first cell uses row-span-3 to cover 3 rows vertically. The second cell uses col-span-2 to cover 2 columns horizontally. The third cell uses row-span-2 to cover 2 rows vertically.