HTML and CSS question: How do I format a table to use uneven rows in each column?-CodePudding

To preface this, I have learnt HTML and CSS through looking at other people’s work to understand the basics of its use, so my understanding is fractured at best. I’m trying to design a table with different row spacing in each column, to imitate the layout of the picture below. So far, nothing I’ve tried even comes close to working. Thus, my question is what elements should I use to recreate this effect, or even better, what code is out there that has a similar use?

Block layout

Any help would be appreciated.

CodePudding user response：

Também não programo a muito tempo, mas eu resolveria da seguinte maneira: junto com o css sua questão é simples de ser respondida. Você pode usar em suas tags o - colspan - ou - rowspan. Caso isso não ajude já que as células da sua tabela estão irregulares uma ideia é criar uma tabela maior com linhas invisíveis e outras tabelas dentro.

CodePudding user response：

This looks like a CSS grid rather than a table.

This snippet's grid has 15 rows (there are 3 big items and 5 smaller ones going down in columns) and 10 columns (the bigger items are shown as having two smaller items width).

The big items occupy 5 rows each and the smaller items occupy 3 rows each.

We also want the items to fill the grid in a columnar direction rather than filling the first row first etc (which is the default).

We put the last 3 bigger items into specific positions so as to ensure other items do not take that space. Everything else just fills the grid up as it goes along.

.container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(15, 1fr);
  gap: 5px;
  width: 100vw;
  height: 33vw;
  background: pink;
  grid-auto-flow: column;
}

.container>div {
  background: cyan;
  grid-column: span 1;
  grid-row: span 3;
}

.container>div:nth-child(1),
.container>div:nth-child(2),
.container>div:nth-child(3),
.container>div:nth-child(14),
.container>div:nth-child(15),
.container>div:nth-child(16),
.container>div:nth-child(35),
.container>div:nth-child(36),
.container>div:nth-child(37) {
  background: yellow;
  grid-column: span 1;
  grid-row: span 5;
}

.container>div:nth-child(35) {
  grid-column: 5 / span 2;
  grid-row: 11 / span 5;
}

.container>div:nth-child(36) {
  grid-column: 7 / span 2;
  grid-row: 11 / span 5;
}

.container>div:nth-child(37) {
  grid-column: 9 / span 2;
  grid-row: 11 / span 5;
}

<div >
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
  <div>21</div>
  <div>22</div>
  <div>23</div>
  <div>24</div>
  <div>25</div>
  <div>26</div>
  <div>27</div>
  <div>28</div>
  <div>29</div>
  <div>30</div>
  <div>31</div>
  <div>32</div>
  <div>33</div>
  <div>34</div>
  <div>35</div>
  <div>36</div>
  <div>37</div>
</div>

CodePudding user response：

You can use the attribute rowspan and colspan like this:

<table border="1">
  <thead>
    <th>Batch</th>
    <th>Name</th>
    <th>Age</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Computer Science</td>
      <td>John</td>
      <td>19</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">Break</th>
    </tr>
  </tfoot>
</table>