Making an html - table to match the design - html

I was trying to create the following table. Could anyone help in figuring out what I did wrong?
Desired:
Current:
http://jsfiddle.net/EV5Yz/
Code:
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td colspan=6>2</td>
</tr>
<tr>
<td colspan=6>9</td>
</tr>
<tr>
<td colspan=6>10</td>
</tr>
</table>


Changes to be made:
4 - 8 need to be in row 2
4 should not have a colspan=2 (it's no different than 5-8)
Your colspan=6 should all be colspan=5
http://jsfiddle.net/a7S6h/1/
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=5>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=5>9</td>
</tr>
<tr>
<td colspan=5>10</td>
</tr>
</table>


DEMO
<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=5>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=5>9</td>
</tr>
<tr>
<td colspan=5>10</td>
</tr>
</table>


try this
<table width="100%" border="1">
<tr>
<td rowspan="4" align="center">1</td>
<td colspan="5" align="center">2</td>
<td rowspan="4" align="center">3</td>
</tr>
<tr>
<td align="center">4</td>
<td align="center">5</td>
<td align="center">6</td>
<td align="center">7</td>
<td align="center">8</td>
</tr>
<tr>
<td colspan="5" align="center">9</td>
</tr>
<tr>
<td colspan="5" align="center">10</td>
</tr>
</table>
Demo
http://jsfiddle.net/EV5Yz/3/


<table border=1>
<tr>
<td rowspan=4>1</td>
<td colspan=6 align="center">2</td>
<td rowspan=4>3</td>
</tr>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
<td colspan=6 align="center">9</td>
</tr>
<tr>
<td colspan=6 align="center">10</td>
</tr>
check at fiddle


Try this code :
<table border=1 style="text-align:center;width:50%;">
<tr>
<td rowspan=4>1</td>
<td colspan=6>2</td>
<td rowspan=4>3</td>
</tr>
<tr>
<td colspan=2>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td colspan=6>9</td>
</tr>
<tr>
<td colspan=6>10</td>
</tr>
</table>
One thing is make text align to center and give some width to your table.

Related

how to create an html table with specific rows and columns

I had a problem while creating a small table with specific details like in the pic enter image description here
I did this code but it doesn't give the wanted results
<html>
<head>
<style>
table,td,th{border: 2px solid gray; text-align:center}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="4">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="8">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6<td>
<td>7<td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>

Use </td> instead of <td> for the closing tags of boxes 6 and 7. The colspan for box 2 is not necessary. The other three colspans were too large. This code should get you to Figure 2.
<table width="30%">
<tr>
<td colspan="3">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="3">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>

This would make the first figure:
<table width="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="4">5</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan="3">6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</table>

There were some errors in your html related to closing </td> tags. This should work:
<html>
<head>
<style>
table,
td,
th {
border: 2px solid gray;
text-align: center
}
</style>
</head>
<body>
<table width="30%">
<tr>
<td colspan="5">1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>3</td>
<td rowspan="2" colspan="6">4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td colspan="4">6</td>
<td colspan="2">7</td>
<td colspan="2">8</td>
</tr>
<tr>
<td colspan="2">9</td>
<td colspan="2">10</td>
<td colspan="2">11</td>
<td colspan="2">12</td>
</tr>
</table>
</body>
</html>
Demo: https://jsfiddle.net/js2ye3uo/

setting rowspan in td table

i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?

Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>

This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO

How to arrange table td using rowspan

I have to arrange table cells as shown in the image below, I am using bootstrap, and I have adjusted it using colspan. but it not works as like in the image.
I have fiddeled here
<table class="table table-bordered table-responsive">
<thead></thead>
<tfoot></tfoot>
<tbody>
<tr>
<td rowspan="4">a</td>
<td rowspan="2" colspan="2">aaa</td>
</tr>
<tr>
<td>asas</td>
<td>asas</td>
</tr>
<tr>
<td>asas</td>
<td>asas</td>
</tr>
<tr>
<td>asas</td>
<td>asas</td>
</tr>
</tbody>
How can I get the table as shown in the image.

I use this to generate the table:
<table border="1" width="500">
<tr>
<td rowspan="3">1</td>
<td colspan="2">2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td rowspan="4">7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
</tr>
</table>

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?

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>

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> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
<tr>
<td rowspan="3"></td>
<td>Name</td>
<td>&nbsp</td>
</tr>
<tr>
<td>Number</td>
<td> </td>
</tr>
<tr>
<td>cost</td>
<td> </td>
</tr>
</table>

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>

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>

<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>

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/

Table within a table

I'm writing a code for the following table (I have to use table inside table)
Here is my code :
<html>
<body>
<table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0 width="250px">
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</table>
</body>
</html>
But in browser I'm getting something different, looking like this :
I'm very beginner with HTML, I'm trying to understand how tables within tables work mostly by doing exercises for that.

This can be accomplished with one table:
HTML
<table border=1 >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
JS Fiddle: http://jsfiddle.net/HcRW3/

your rowspan in the 3rd row can't work as the table has only one row. It doesn't know anything about the outside table.
I really can't understand why you have to go with table in table, but if you must, the outer table can only have 3 rows and the 3rd nested table has two rows.

May well work better for you:
<html>
<body>
<table border="1" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td style="border-bottom: none;">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td style="border-top: none;"></td>
<td>17</td>
</tr>
</table>
</body>
</html>

This is not an answer, but just an extension to my comment, to explain the result.
table is not a valid child of tr, only th and td are valid as child of tr.
For most browsers the behavior if they detect an invalide child inside of an element is, to move the child after that element. This is repeated until the structure is valid.
Because table is neither a valid child of tr nor of table the innter tables are all moved outside of the surrounding table. The resulting structure the browsers most likely creates out of your original code of the question:
<table>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
</tr>
<tr>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>
</tr>
</table>
would then be:
<table>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>1</td>
<td width=20%>2</td>
<td width=20%>3</td>
<td width=20%>4</td>
<td width=20%>5</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=60%>6</td>
<td width=20%>7</td>
<td width=20%>8</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td width=20%>9</td>
<td width=20%>10</td>
<td width=20%>11</td>
<td width=20% rowspan=2>12</td>
<td width=20%>13</td>
</tr>
</table>
<table border=1 cellspacing=0>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

May I advise you use colspan and Rowspan instead of tables inside tables it much easier and how I do most of my tables which require cells to be merged.
You can find an example of colspan here:
http://www.w3schools.com/tags/att_td_colspan.asp
and an example of rowspan:
http://www.w3schools.com/tags/att_td_rowspan.asp
Here is an example of the code to do this:
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td >3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td >11</td>
<td rowspan="2">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td >15</td>
<td >16</td>
<td>17</td>
</tr>
</table>

I'm pretty sure you should be able to do this in one table. Like this,
<table border=1 cellspacing=0>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=3>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<tdrowspan=2>12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>

You should try not to put a table inside a table. "Rowspan" and "colspan" are a good idea. You'd probably want to use 'valign' top (vertical align) to make sure the 12 stays on the same level as the row.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="3">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td rowspan="2" valign="top">12</td>
<td>13</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
</table>