Table markup using HTML

user_11707714 0
Viewed 72

I need to make markup for creating the next table (using HTML):

task

Here is my way of making that (doesn't work):

Step 1: Making "general" markup with all cells of equal size:

td { border: solid #aaa 1px }
<table>
  <thead>
    <tr>
      <th colspan="4">Some Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
      <td>1.4</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
      <td>2.4</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
      <td>3.4</td>
    </tr>
  </tbody>
</table>

Output: Step 1

Step 2: Using "colspan" and "rowspan" for making cells 1.3 and 2.1 bigger and deleting unnecessary cells (1.4, 2.3, 2.4, 3.3 and 3.4), except one (2.2 , just for now): Step 2

Step 3: As soon as I delete cell 2.2 - big cells (1.3 and 2.1) become "smaller": Step 3 and it isn't what I need...

Here is my final markup: 

td { border: solid #aaa 1px }
<table>
  <thead>
    <tr>
      <th colspan="4">Some Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td colspan="2" rowspan="2">1.3</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">2.1</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
    </tr>
  </tbody>
</table>

I can't find out how to delete cell 2.2 and keep table's shape as it mentioned in the task... Appreciate any help.

html
3 Answers

You should try to this code

td {
border: 1px solid #579;
}
<table>
    <tbody>
 <tr>
    <td>1.1</td>
     <td>1.2</td>            
     <td colspan="2">1.3</td>
   </tr>
   <tr>
     <td colspan="2" rowspan="2">2.1</td>
     <td>2.2</td>      
     <td>2.3</td>
   </tr>
   <tr>
     <td>3.1</td>
     <td>3.2</td>           
   </tr>
 </tbody>
  </table>

user_115541580

You should try this 

<style>td{border:1px solid black;}
        tr{height:35px;}
</style>

<table>
 <tbody>
  <tr>
   <td colspan="4">Head</td>
  </tr>
  <tr>
   <td>1.1</td>
   <td>1.2</td>
   <td colspan="2" rowspan="2">1.3</td>
  </tr>
  <tr>
   <td colspan="2" rowspan="2">2</td>
  </tr>
  <tr>
   <td>3.1</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>

user_45170480

Here is we Achieve the Output

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
}

tr {
  height: 30px;
}

td {
  height: 30px;
  width: 50px;
  text-align: center;
}
<table>
  <tr>
    <td>1.1</td>
    <td>1.2</td>
    <td colspan="2" rowspan=2>1.3</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">2.1</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
  </tr>
</table>

user_65360310
Related