Część wierszy przerzuca do nowej kolumny w tabeli - HTML

Question

Witam,

Od paru miesięcy uczę się html-a na lekcjach zawodowych, wszystko idzie dobrze, lecz ostatnio przy jednym zadaniu (spoza lekcji), zaczęło mi dwa ostatnie wiersze przerzucać do nowej kolumny w tabeli. Pewnie jest na to jakieś banalne rozwiązanie, jednak nic co próbowałam nie poskutkowało, a w internecie nic nie znalazłam, a chyba nic więcej już nie wymyślę.
   

<table border="1"; cellspacing="4">
        <tr>
            <td rowspan="9">Ż<br>Y<br>C<br>Z<br>L<br>I<br>W<br>O<br>Ś<br>Ć</td>
            <td colspan="9">WSPANIAŁA</td>
        </tr>
        <tr>
            <td rowspan="7">P<br>I<br>Ę<br>K<br>N<br>A</td>
            <td colspan="7">MIŁA</td>
            <td rowspan="9">K<br>O<br>C<br>H<br>A<br>N<br>A</td>
        </tr>
        <tr>
            <td rowspan="6" colspan="6"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Nuvola_apps_package_favorite.svg/1200px-Nuvola_apps_package_favorite.svg.png" width="220px" height="220px"></td>
            <td rowspan="6">D<br>O<br>B<br>R<br>A</td>
        </tr>
        <tr>
            <td colspan="8">MĄDRA</td>
        </tr>
        <tr>
            <td colspan="9">WSPANIAŁA</td>
        </tr>  
    </table>

Tabela jest 10x10 i powinna tak wyglądać mniej więcej:

Będę bardzo wdzięczna za każdą odpowiedź z pomysłem, jak temu zaradzić.

Answer 1

Opuściłaś puste wiersze:

<tr>
            <td rowspan="9">Ż<br>Y<br>C<br>Z<br>L<br>I<br>W<br>O<br>Ś<br>Ć</td>
            <td colspan="9">WSPANIAŁA</td>
        </tr>
        <tr>
            <td rowspan="7">P<br>I<br>Ę<br>K<br>N<br>A</td>
            <td colspan="7">MIŁA</td>
            <td rowspan="9">K<br>O<br>C<br>H<br>A<br>N<br>A</td>
        </tr>
        <tr>
            <td rowspan="6" colspan="6"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Nuvola_apps_package_favorite.svg/1200px-Nuvola_apps_package_favorite.svg.png" width="220px" height="220px"></td>
            <td rowspan="6">D<br>O<br>B<br>R<br>A</td>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
        </tr>
        <tr>
            <td colspan="8">MĄDRA</td>
        </tr>
        <tr>
            <td colspan="9">WYROZUMIAŁA</td>
        </tr>  
    </table>

 

Comments

Dziękuję bardzo. Czyli jak czułam, coś banalnego, a ja standardowo szukam jakiegoś większego błędu i nie zauważam tych najprostszych. Jeszcze raz dzięki bardzo, razem ze znajomymi nie wpadliśmy na to.

Answer 2

Chyba bardziej tak

<table border="1" cellspacing="0" cellpadding="15">
  <tr>
    <td rowspan="9">Ż<br>Y<br>C<br>Z<br>L<br>I<br>W<br>A</td>
    <td colspan="9" align="center">WSPANIAŁA</td>
  </tr>
  <tr>
    <td rowspan="7">P<br>I<br>Ę<br>K<br>N<br>A</td>
    <td colspan="7" align="center">MIŁA</td>
    <td rowspan="9">K<br>O<br>C<br>H<br>A<br>N<br>A</td>
  </tr>
  <tr>
    <td rowspan="6" colspan="6"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Nuvola_apps_package_favorite.svg/1200px-Nuvola_apps_package_favorite.svg.png" width="220px" height="220px" alt="ZDJECIE"></td>
    <td rowspan="7">D<br>O<br>B<br>R<br>A</td>
  </tr>
  <tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
  <tr> 
    <td colspan="7" align="center">MĄDRA</td>
  </tr>
  <tr>
    <td colspan="9" align="center">WYROZUMIAŁA</td>
  </tr>  
</table>

 

---

 

BTW, w dzisiejszych czasach do tworzenia layout-u powinno się wykorzystywać css zamiast <table>, przykład z użyciem grid-a, np. z użyciem grid-template-areas jest tak proste jak ponumerowanie pól na szachownicy. 

  grid-template-areas:
    "b1 b2 b2  b2  b2  b2  b2  b2  b2 b2"
    "b1 b3 b4  b4  b4  b4  b4  b4  b4 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b7 b7  b7  b7  b7  b7  b7  b5 b6"
    "b8 b8 b8  b8  b8  b8  b8  b8  b8 b6";

 

[ pełny kod przykładu on-line ]

<div class="container">
  <div class="b1">życzliwa</div>
  <div class="b2">wspaniała</div>
  <div class="b3">piękna</div>
  <div class="b4">miła</div>
  <div class="img">
    <img src="https://picsum.photos/id/660/2108/1272" 
         width="220px" height="220px" alt="ZDJECIE">
  </div>
  <div class="b5">dobra</div>
  <div class="b6">kochana</div>
  <div class="b7">mądra</div>
  <div class="b8">wyrozumiała</div>
</div>

.container {  
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 0px;
  grid-template-areas:
    "b1 b2 b2 b2 b2 b2 b2 b2 b2 b2"
    "b1 b3 b4 b4 b4 b4 b4 b4 b4 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b3 img img img img img img b5 b6"
    "b1 b7 b7 b7 b7 b7 b7 b7 b5 b6"
    "b8 b8 b8 b8 b8 b8 b8 b8 b8 b6";

  width: 500px;
  height: 500px;
  border: 1px solid black;
  text-transform: uppercase;
  font: 700 1.2rem/1.1 system-ui, monospace;
  text-align: center;
}
.container div {
  border: 1px solid black;
}

.b1 { grid-area: b1; }
.b2 { grid-area: b2; }
.b3 { grid-area: b3; }
.b4 { grid-area: b4; }
.img { grid-area: img; }
.b5 { grid-area: b5; }
.b6 { grid-area: b6; }
.b7 { grid-area: b7; }
.b8 { grid-area: b8; }

.b1, .b3, .b5, .b6 {
  padding: 0 25%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
}
.b2, .b4, .b7, .b8 {
  line-height: 2.4;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}