Side headboards on tables

Question

Side headboards on tables

Navigation

#1 by (5 votes)

5

How can I create left side headings in tables? For example, I have the following table:

<table border="1" cellspacing="0">
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
            <th>Titulo 3</th>
            <th>Titulo 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
    </tbody>
    <tbody style="background: #bdbdbd;">
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
    </tbody>
    <tbody style="background: #bdbdbd;">
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
        <tr>
            <td>Ejemplo 1</td>
            <td>Ejemplo 2</td>
            <td>Ejemplo 3</td>
            <td>Ejemplo 4</td>
        </tr>
    </tbody>

and so it would look in the browser:

As you can see I have severed the tbody color as it should be, I want to add an extra header left to each of these tbody to indicate the separation, something like flanges

Note: I have tried with rowspan and the idea is that they are not inside the table, if not on the side, like tabs.

How do I do that? Thanks!

html5 html css3 css

asked by Iranh Canul May 01.03.2017 в 18:38

source

1 answer

Know when the App is launched for the first time on Android Addition and subtraction in a chain

score 5 · Accepted Answer

Taking into account the first recommendation I made (you should only have one tbody), you could just stylize the first cell to form tabs:

td, th{
  border: 1px solid black;
}
.pestana{
  background-color: #DFD;
  color: black;
  writing-mode: tb-rl;
  min-width:20px;
  border-left: 0px;
}

thead .pestana{
  border: 0px;
  background-color: #FFF;
}

<table cellspacing="0">
  <thead>
    <tr>
      <th class="pestana"></th>
      <th>Titulo 1</th>
      <th>Titulo 2</th>
      <th>Titulo 3</th>
      <th>Titulo 4</th>
    </tr>
  </thead>
  <tbody>
    <!-- primer segmento -->
    <tr>
      <td rowspan="3" class="pestana">Head 1</td>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
    <tr>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
    <tr>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
    
    <!-- segundo segmento -->
    <tr>
      <td rowspan="3" class="pestana">Head 2</td>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
    <tr>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
    <tr>
      <td>Ejemplo 1</td>
      <td>Ejemplo 2</td>
      <td>Ejemplo 3</td>
      <td>Ejemplo 4</td>
    </tr>
  </tbody>
</table>

where rowspan="3" is a variable number depending on the number for which you want to group.