Cant format html table correctly

Question

I want to achieve this table format

+--------------------+
|         1          |
|--------------------|
|   2         |3     |
|-------------|      |
|   4  |  5   |      |
|      |------|      |
|      | 8| 9 |      |
|      |  |   |------|
|      |  |   | 6 |7 |
+--------------------+

<table border="1" ; width=50%">
<tbody  >
<tr><td colspan="5" >1</td></tr>
<tr><td colspan="3" >2</td><td colspan="2" ; rowspan="3" >3</td></tr>
<tr><td rowspan="3" >4</td><td colspan="2" >5</td></tr>
<tr><td rowspan="2" >8</td><td rowspan="2" >9</td></tr>
<tr><td rowspan="1" >6</td><td>7</td></tr>
</tbody>
</table>

This code should output the table. But the cell 8,9 doesn't work properly.It does show to be little higher than 6,7 if I zoom in.

It works perfectly however if I add a column before

<table border="1" ; width=50%">
<tbody  >
<tr><td>#</td><td colspan="5" >1</td></tr>
<tr><td>#</td><td colspan="3" >2</td><td colspan="2" ; rowspan="3" >3</td></tr>
<tr><td>#</td><td rowspan="3" >4</td><td colspan="2" >5</td></tr>
<tr><td>#</td><td rowspan="2" >8</td><td rowspan="2" >9</td></tr>
<tr><td>#</td><td rowspan="1" >6</td><td>7</td></tr>
</tbody>
</table>

What is wrong here?

Can you write your code as a snippet so it's easier for the rest of us to edit and tinker with? — Nicolas Goosen, Apr 28 '22 at 12:27
You have a number of syntax errors in your HTML. Don't use `;`to separate attributes. Quote attribute values properly. Please click "Edit" below your question, and correct those mistakes in the snippets I created for you. — connexo, Apr 28 '22 at 12:32
well, this is from my friend.i dont do html. he said its the new html standard — Riyadh Kabir, May 02 '22 at 02:59

score 0 · Answer 1 · answered Apr 28 '22 at 12:25

0

You need at least one row with 5 cells. This row can be hidden.

answered Apr 28 '22 at 12:25

Helge

63
6

`1` is a row with 5 columns. – connexo Apr 28 '22 at 12:30

Maik Lowrey · Answer 2 · 2022-04-28T12:51:35.203

I had some problems to refactor your table html. I generate a new one.

<table style="width: 100%;" border="1" cellpadding="10">
  <tbody>
    <tr style="height: 21px;">
      <td style="height: 21px;" colspan="5">1</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;" colspan="3">2</td>
      <td style="height: 21px;" colspan="2" rowspan="3">3</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 63px;" rowspan="3">4</td>
      <td style="height: 21px;" colspan="2">5</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;" rowspan="2">6</td>
      <td style="height: 21px;" rowspan="2">7</td>
    </tr>
    <tr style="height: 21px;">
      <td style="height: 21px;">8</td>
      <td style="height: 21px;">9</td>
    </tr>
  </tbody>
</table>

Please don't just c&p invalid HTML; correct it. – connexo Apr 28 '22 at 12:33 — connexo, Apr 28 '22 at 12:33
@connexo thanks for hint. i generate new table. – Maik Lowrey Apr 28 '22 at 12:52 — Maik Lowrey, Apr 28 '22 at 12:52

aloisdg · Answer 3 · 2022-04-28T12:41:32.170

If you are fine with using CSS instead of table (tables are for showing tabular data, not for laying out your website), you can benefit greatly from the grid layout. If you don't know the advantages of relying on CSS Grid instead of HTML table: CSS-Grid instead of , CSS Grid vs Tables, In what sense is a CSS grid a better option than a basic HTML table? and more on your favorite search engine.

Here is a demo showcasing how grid can help you:

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  aspect-ratio: 3; /* fluff for demo purpose */
}

.div1 {
  grid-area: 1 / 1 / 2 / 7;
}

.div2 {
  grid-area: 2 / 1 / 3 / 5;
}

.div3 {
  grid-area: 2 / 5 / 6 / 7;
}

.div4 {
  grid-area: 3 / 1 / 7 / 3;
}

.div5 {
  grid-area: 3 / 3 / 4 / 5;
}

.div6 {
  grid-area: 6 / 5 / 7 / 6;
}

.div7 {
  grid-area: 6 / 6 / 7 / 7;
}

.div8 {
  grid-area: 4 / 3 / 7 / 4;
}

.div9 {
  grid-area: 4 / 4 / 7 / 5;
}

/* fluff for demo purpose */
section {
  border: 1px orange dashed;
  display: grid;
  place-items: center;
}

<div class="parent">
  <section class="div1">1</section>
  <section class="div2">2</section>
  <section class="div3">3</section>
  <section class="div4">4</section>
  <section class="div5">5</section>
  <section class="div6">6</section>
  <section class="div7">7</section>
  <section class="div8">8</section>
  <section class="div9">9</section>
</div>

Generated with: CSS Grid Generator

Cant format html table correctly

3 Answers3