Login | Register | FAQ
Anonymous

Hierarcy structure using HTML

+ Post a reply

1 post Page 1 of 1


Hierarcy structure using HTML

by Kaniguan » Wed Mar 21, 2018 2:33 am

Hi,

I'm newbie to this forum and also in HTML coding.
I want to make an html contains multiple rectangle (with text) in hierarchy format. so far I have this html code. I need to add more table tag to complete or to accomplished my desired result but just want to ask if its okay if the code is too long is there any other approach to shorten this process? How could I add the first 3 rows rectangle from my html code. Thank you in advance.


sample attached desired result.
Code: Select all
<table>
  <tbody>
    <tr>
      <td>
        <table>
          <tbody>
            <tr>
              <td colspan="3">
                <h3>With Power</h3>
              </td>
            </tr>
            <tr>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td colspan="3" style="background: gray;">Level1</td>
            </tr>
            <tr>
              <td>L1-Sample1</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample2</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample3</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample4</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <!-- level2 -->
            <tr>
              <td colspan="3" style="background: green;">Level2</td>
            </tr>
            <tr>
              <td>L2-sample1</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample2</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample3</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample4</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample5</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample6</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample7</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <!-- Level3 -->
            <tr>
              <td colspan="3" style="background: blue;">Level3</td>
            </tr>
            <tr>
              <td>L3-Good</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L3-Bad</td>
              <td>value</td>
              <td>value</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table>
          <tbody>
            <tr>
              <td colspan="3">
                <h3>No Power</h3>
              </td>
            </tr>
            <tr>
              <td colspan="3"></td>
            </tr>
            <tr>
              <td colspan="3" style="background: gray;">Level1</td>
            </tr>
            <tr>
              <td>L1-Sample1</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample2</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample3</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L1-sample4</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <!-- level2 -->
            <tr>
              <td colspan="3" style="background: green;">Level2</td>
            </tr>
            <tr>
              <td>L2-sample1</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample2</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample3</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample4</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample5</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample6</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L2-sample7</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <!-- Level3 -->
            <tr>
              <td colspan="3" style="background: blue;">Level3</td>
            </tr>
            <tr>
              <td>L3-Good</td>
              <td>value</td>
              <td>value</td>
            </tr>
            <tr>
              <td>L3-Bad</td>
              <td>value</td>
              <td>value</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Attachments

  1. sample2A.jpg (187.3 KiB) Downloaded 244 times

User avatar

Kaniguan

  • Posts: 1
  • Joined: Wed Mar 21, 2018 2:16 am


+ Post a reply

Page 1 of 1