CODEWITHSUNDEEP
htmlhtml-table
Joseph John
Joseph John

Reputation: 520

How do I create an HTML table with the following structure?

I'm trying to create a table with the following structure.

I've been reading various sites and blogs to try to create this myself, but I have failed, terribly, and decided to ask for help here.

So far, I've been able to create the outer structure:

<table border='1' style="width:100%">
  <tr>
    <td>Foo</td>
    <td>Bar</td> 
  </tr>
  <tr>
    <td>Bak</td>
    <tr></tr>
    <td>Baz</td> 
  </tr>
  <tr>
    <td>Foo</td>
    <td>Bar</td> 
  </tr>
  <tr>
    <td>Bak</td>
    <td>Baz</td> 
  </tr>  
</table>

But I can't figure out how to add the fields for Name, Number, and Cost. How do I nest it?

Upvotes: 0

Views: 98

Answers (6)

gp5150
gp5150

Reputation: 11

<table border='1' style="width: 100%">
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>

    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
    </tr>

</table>

Upvotes: 1

Mark Zucchini
Mark Zucchini

Reputation: 925

In general way like this

<table border="1">
  <tr>
    <td rowspan="3">1</td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td rowspan="3">2</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
    <td>12</td>
  </tr>
  <tr>
    <td rowspan="3">3</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
  </tr>
  <tr>
    <td>17</td>
    <td>18</td>
  </tr>
</table>

http://jsfiddle.net/s5b0c5d9/

Upvotes: 0

Joey Chong
Joey Chong

Reputation: 1510

User rowspan

<table border="1">
  <tr>
    <td rowspan="3">Data Section 1</td>
    <td>Some Data 1.1</td>
  </tr>
  <tr>
    <td>Some Data 1.2</td>
  </tr>
   <tr>
    <td>Some Data 1.3</td>
  </tr>
  <tr>
    <td rowspan="3">Data Section 2</td>
    <td>Some Data 2.1</td>
   </tr>
  <tr>
    <td>Some Data 2.2</td>
  </tr>
   <tr>
    <td>Some Data 2.3</td>
  </tr>
</table>

Upvotes: 1

Atul Nar
Atul Nar

Reputation: 695

try fiddle fiddle 

<table border='1' style="width:100%">
  <tr>
    <td>1</td>
    <td>2</td> 
    <td>3</td> 
  </tr>
  <tr>
    <td rowspan="3">some</td>
    <td>Name</td>  
    <td>11</td>
  </tr>
  <tr>
    <td>No</td>
    <td>22</td>
  </tr>
  <tr>
    <td>Cost</td>
    <td>22</td>
  </tr>


</table>

Upvotes: 1

Quentin
Quentin

Reputation: 944564

Use rowspan to cause a cell to appear in multiple rows, headers to link your data cells with header cells that aren't in traditional positions, and tbody to describe subdivisions of a table. 

table, td, th {
  border-collapse: collapse;
  border: solid black 1px;
  padding: 3px;
 }
<table>
    <tbody>
        <tr>
            <td rowspan="3"> ...
            <th id="name_1"> Name
            <td headers="name_1"> ...
        <tr>
            <th id="number_1"> Number
            <td headers="number_1"> ...
        <tr>
            <th id="cost_1"> Cost
            <td headers="cost_1"> ...
    <tbody>
        <tr>
            <td rowspan="3"> ...
            <th id="name_2"> Name
            <td headers="name_2"> ...
        <tr>
            <th id="number_2"> Number
            <td headers="number_2"> ...
        <tr>
            <th id="cost_2"> Cost
            <td headers="cost_2"> ...
</table>

Upvotes: 1

vaso123
vaso123

Reputation: 12391

You need to use rowspan JSFIDDLE

<table border="1">
    <tr>
        <td rowspan="3"></td>
        <td>Name</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>Number</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>cost</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td rowspan="3"></td>
        <td>Name</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>Number</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>cost</td>
        <td>&nbsp;</td>
    </tr>
</table>

Upvotes: 1

Related Questions