HTML: td layout issue - html

Really couldn't draw something good here, so drew it in Excel.
Here is I tried to render some code in HTML:
<table>
<thead>
<th>
<th>
<th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<p></p>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>


Use colspan to merge across columns like so:
<tr>
<td colspan="3">This is how I want it to look</td>
</tr>
Demo


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


th,
td {
border: 1px solid #cfcfcf;
padding: 10px;
}
<table>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan=3>TD</td>
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</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/

Table rows is not stretching full-length in 1st Table, in 2nd it does fine

In the following code, my 1st table rows are not stretching to full which is frustrating. While 2nd table is fine and stretches as expected. Can someone cite me the reason and help fix it?
body {padding: 20px;}
table {border:1px solid gray;}
.orange {background:#ffa566!important;}
.aqua {background: #aaffff!important;}
table {display:inline-block;float:left;}
tbody, thead {width:100%;}
<html>
<head>
<link rel="stylesheet" src="<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
</head>
<body>
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
</thead>
<tbody>
<tr class="orange"><td>1</td><td>BJP</td><td>303</td></tr>
<tr class="orange"><td>2</td><td>Shiv-Sena</td><td>18</td></tr>
<tr class="orange"><td>3</td><td>JD(U)</td><td>14</td></tr>
<tr class="orange"><td>4</td><td>LJP</td><td>6</td></tr>
<tr><td>5</td><td>Akali-Dal</td><td>2</td></tr>
<tr><td>6</td><td>Apna-Dal</td><td>2</td></tr>
<tr><td>7</td><td>Jharkhand Student Union</td><td>2</td></tr>
<tr><td>8</td><td>AIDMK</td><td>1</td></tr>
<tr><td>9</td><td>Loktantrik-Party (Hanuman Beniwal)</td><td>1</td></tr>
<tr><td>10</td><td>Democratic-Progressive-Party (Nagaland)</td><td>1</td></tr>
<tr><td>11</td><td>People-Party (Meghalay-Manipur)</td><td>1</td></tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr><th>#</th><th>Party</th><th>Seats</th></tr>
<tr class="aqua"><td>1</td><td>Congress</td><td>52</td></tr>
<tr class="aqua"><td>2</td><td>DMK (Karunanidhi)</td><td>23</td></tr>
<tr class="aqua"><td>3</td><td>NCP (Sharad-Pawar)</td><td>5</td></tr>
<tr><td>4</td><td>National-Conference (farooq-abdulla)</td><td>3</td></tr>
<tr><td>5</td><td>Indian Union Muslim League - Kerela</td><td>3</td></tr>
<tr><td>6</td><td>Janata-Dal(Secular) - Dewegowda/Karnataka</td><td>1</td></tr>
<tr><td>7</td><td>Jharkhand Mukti Morcha</td><td>1</td></tr>
<tr><td>8</td><td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td><td>1</td></tr>
<tr><td>9</td><td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td><td>1</td></tr>
<tr><td>10</td><td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td><td>1</td></tr>
</table>
</body>
</html>

Remove display: inline-block; in table should solve the issue.
body {
padding: 20px;
}
table {
border: 1px solid gray;
}
.orange {
background: #ffa566 !important;
}
.aqua {
background: #aaffff !important;
}
table {
float: left;
}
tbody,
thead {
width: 100%;
}
<h1>Lok Sabha</h1>
<h3>2019</h1>
<table class="table table-striped" style="width:500px">
<thead>
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
</thead>
<tbody>
<tr class="orange">
<td>1</td>
<td>BJP</td>
<td>303</td>
</tr>
<tr class="orange">
<td>2</td>
<td>Shiv-Sena</td>
<td>18</td>
</tr>
<tr class="orange">
<td>3</td>
<td>JD(U)</td>
<td>14</td>
</tr>
<tr class="orange">
<td>4</td>
<td>LJP</td>
<td>6</td>
</tr>
<tr>
<td>5</td>
<td>Akali-Dal</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>Apna-Dal</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Student Union</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>AIDMK</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Loktantrik-Party (Hanuman Beniwal)</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>Democratic-Progressive-Party (Nagaland)</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>People-Party (Meghalay-Manipur)</td>
<td>1</td>
</tr>
</tbody>
</table>
<table class="table table-striped" style="width:500px">
<tr>
<th>#</th>
<th>Party</th>
<th>Seats</th>
</tr>
<tr class="aqua">
<td>1</td>
<td>Congress</td>
<td>52</td>
</tr>
<tr class="aqua">
<td>2</td>
<td>DMK (Karunanidhi)</td>
<td>23</td>
</tr>
<tr class="aqua">
<td>3</td>
<td>NCP (Sharad-Pawar)</td>
<td>5</td>
</tr>
<tr>
<td>4</td>
<td>National-Conference (farooq-abdulla)</td>
<td>3</td>
</tr>
<tr>
<td>5</td>
<td>Indian Union Muslim League - Kerela</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>Janata-Dal(Secular) - Dewegowda/Karnataka</td>
<td>1</td>
</tr>
<tr>
<td>7</td>
<td>Jharkhand Mukti Morcha</td>
<td>1</td>
</tr>
<tr>
<td>8</td>
<td>Revolutionary Socialist Party - left-winged/ socialist/ W.Bengal</td>
<td>1</td>
</tr>
<tr>
<td>9</td>
<td>Kerela-Congress[M] - Chrisitan/Kerela/5mla-seats</td>
<td>1</td>
</tr>
<tr>
<td>10</td>
<td>VCK (Tamil Panther Party) -Supports LTTE/dalit-tamil-support/tamil-nationalism</td>
<td>1</td>
</tr>
</table>

Create table html as the image

https://jsfiddle.net/tn7rd9sq/
I need create the table of this image:
<table border='1'>
<tr>
<th rowspan="3">text</th>
<th colspan="2">text</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>other text</td>
<td>2</td>
<td>2</td>
</tr>
</table>
I do not know how to do the part when there are 3 together

td {
width: 20px;
height: 20px;
}
td.wider {
width: 60px;
}
tr.taller {
height: 40px;
}
<table border='1'>
<tr class="taller">
<td class="wider" rowspan="3"></td>
<td colspan="6"></td>
</tr>
<tr>
<td colspan="3"></td>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

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/