My Code is......
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Row two doesn't show. How can I do it?
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td >  </td>
<td > </td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
Have you tried adding <td> </td> ?
Related
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/
I am trying to create this type of table or design in HTML/CSS/PHP.
In each block, there will be 3 variables. One with horizontal orientation in center and two with vertical orientation in either direction of a center variable.
I have tried to replicate this by using HTML tables but not getting proper results. This is what I have managed to get.
I already did the programming to configure variables and putting them where they should be with orientation but kind of stuck at proper UI. Kindly help me to design this.
Adding in HTML :
<table style="width:400px">
<tr>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>45</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td> </td>
<td>3</td>
</tr>
</table>
</td>
</tr>
</table>
Adding in css:
th, td {
padding: 15px;
}
Solve It :)
Good luck !!!
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>
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> </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> </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/
I want to create a table like
col1 | col2 | col3
** ** **
col4
****************
How should I write the html table tag?
Thank you so much
Best Way - add a column Span to the merged.
<table>
<tr>
<th>*</th>
<th>*</th>
<th>*</th>
</tr>
<tr>
<td colspan="3">***</td>
</tr>
</table>
JSFIDDLE: http://jsfiddle.net/Lde2fwe7/
Do it like this :
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3">*********</td>
</tr>
</table>
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td colspan="3">col4</td>
</tr>
<tr>
<td colspan="3"> your text*</td>
</tr>
</table>
JSFiddle
use colspan can achieve it.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="3">head</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>