Question 188030 in Html Question posted in
Some basic documentation can be found here.

Html – How can I split these columns from my table only in certain rows?

I’m new to HTML and would like to create a table that looks like the one in this picture:

Table image

I have a close attempt, but some columns in the middle are merged unlike the table shown in the bottom of the picture. I want my code to have split columns like in that bottom table.

<h6>↓ My Table ↓</h6>
<table border="3">
  <tr align="center">
    <th colspan="7">Element</th>
  </tr>
  <tr>
    <th>I</th>
    <th>II</th>
    <th>III IV V</th>
    <th>VI</th>
    <th>VII</th>
  </tr>
  <tr>
    <td>H</td>
    <td>&nbsp;</td>
    <td rowspan="3">Periyodik Element<br><center>Tablosu</center></td>
    <td>`&nbsp;`</td>
    <td>He</td>
  </tr>
  <tr>
    <td>Li</td>
    <td>Be</td>
    <td>B</td>
    <td>Ne</td>
  </tr>
  <tr>
    <td>Ne</td>
    <td>Mg</td>
    <td>Al</td>
    <td>Ar</td>
  </tr>
  <tr>
    <td>K</td>
    <td>Ca</td>
    <td><center>Sc &nbsp;Ti &nbsp;V</center></td>
    <td>Ga</td>
    <td>Kr</td>
  </tr>
</table>
Tags:

2

Answers


  1. 0

    Solution

    The setting you are looking for is the colspan attribute.

    In colspan, you can specify how many columns wide a particular column should be. For example, in the cell with the text "Periodic Table of Elements", where you have correctly set the rowspan to be 3 rows high, you should also set the colspan to be 3 columns wide.

    Any cell that spans multiple columns in the image should be represented by multiple separate cells in the code. So, instead of entering the "III, IV, and V" cells in one cell, you should enter them in three different cells. Please follow my example to understand the solution.

    <h6>↓ My Table ↓</h6>
<table border="3">
  <tr align="center">
    <th colspan="7">Element</th>
  </tr>
  <tr>
    <th>I</th>
    <th>II</th>

    <!-- Added three separated column -->
    <th>III</th>
    <th>IV</th>
    <th>V</th>

    <th>VI</th>
    <th>VII</th>
  </tr>
  <tr>
    <td style="background-color: #FFCBFF;">H</td> <!-- Added background-color -->

    <td>&nbsp;</td>

    <!-- Set colspan (how many column is it) to 3 -->
    <td rowspan="3" colspan="3" style="text-align: center;"> <!-- Added text-align instead of <center> -->
       <p style="margin: 0 4px;">Periyodik Element</p> <!-- Added <p> instead of <br> -->
       <p style="margin: 0 4px;">Tablosu</p> <!-- Added <p> instead of <br> -->
    </td>

    <td>&nbsp;</td>
    <td style="background-color: #FFFDA7;">He</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>Li</td>
    <td>Be</td>
    <td>B</td>
    <td style="background-color: #FFFDA7;">Ne</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>Ne</td>
    <td>Mg</td>
    <td>Al</td>
    <td style="background-color: #FFFDA7;">Ar</td> <!-- Added background-color -->
  </tr>
  <tr>
    <td>K</td>
    <td>Ca</td>

    <!-- Added three separated column -->
    <td style="text-align: center;">Sc</td> <!-- Added text-align instead of <center> -->
    <td style="text-align: center;">Ti</td> <!-- Added text-align instead of <center> -->
    <td style="text-align: center;">V</td> <!-- Added text-align instead of <center> -->

    <td>Ga</td>
    <td style="background-color: #FFFDA7;">Kr</td> <!-- Added background-color -->
  </tr>
</table>

    More information

    <td> colspan attribute – MDN

    Use CSS for formatting (ex. text-align: center; or display: block; or font-weight: bold;) instead of HTML elements (ex. <center>, <br>, <strong>, etc.)

    What’s CSS?

    Use class for CSS formatting – MDN

    Login or Signup to reply.
  2. 0

    The borders are a bit tricky but colspan was required on your rowspan table cell.

    body {
  font-size: 16px;
}

.my-table {
  width: 600px;
  margin: 20px;
  box-shadow: 
    0 0 0 0.3rem white, /* white gap after table border=2 */
    0 0 0 0.35rem black, /* border before outer border */
    0 0 0 0.5rem white, /* white gap before outer border*/
    0 0 0 0.8rem #808080; /* outer border*/
}

.pink-cell {
  background: #ffcbff;
}

.yellow-cell {
  background: #ffff9e;
}
    <h6>↓ My Table ↓ </h6>
<table class="my-table" border="1" cellspacing="3">
  <tr align="center">
    <th colspan="7">Periyodik ElementTablosu</th>
  </tr>
  <tr>
    <th>I</th>
    <th>II</th>
    <th>III</th>
    <th>IV</th>
    <th>V</th>
    <th>VI</th>
    <th>VII</th>
  </tr>
  <tr>
    <td class="pink-cell">H</td>
    <td>&nbsp;</td>
    <td colspan="3" rowspan="3">
      <center>Periyodik ElementTablosu</center>
    </td>
    <td>&nbsp;</td>
    <td class="yellow-cell">He</td>
  </tr>
  <tr>
    <td>Li</td>
    <td>Be</td>
    <td>B</td>
    <td class="yellow-cell">Ne</td>
  </tr>
  <tr>
    <td>Ne</td>
    <td>Mg</td>
    <td>Al</td>
    <td class="yellow-cell">Ar</td>
  </tr>
  <tr>
    <td>K</td>
    <td>Ca</td>
    <td>
      <center>Sc</center>
    </td>
    <td>
      <center>Ti</center>
    </td>
    <td>
      <center>V</center>
    </td>
    <td>Ga</td>
    <td class="yellow-cell">Kr</td>
  </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search