HTML table add header to each row - html

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>

Related

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/

How to show row have spacing in html?

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 > &nbsp</td>
<td >&nbsp</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>

Have you tried adding <td> </td> ?

Making an html - table to match the design

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.

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>

How is make this html table?

I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/

Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE

<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>

Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>

Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>

<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...