How to create Html table tr inside td - html

I am trying to create table in html. I have following design to create. I had added tr inside the td but somehow the table is not created as per the design.enter image description here
Can anyone suggest me how can i achieve this.
I am unable to create rounded area in the image
AidanS i tired as u suggested but i am getting like this
enter image description here
here is my html code
<table>
<tr>
<th></th>
<th>Action Plan</th>
<th>Condition</th>
</tr>
<tr>
</tr>
<tr>
<td>01.</td>
<td>Advance payment</td>
<td>$100</td>
</tr>
<tr>
<td>02.</td>
<td>Bidding </td>
<td>$80</td>
</tr>
<tr>
<td>03.</td>
<td>Sending price & details of the vehicle </td>
<td>$80</td>
</tr>
<tr>
<td>04.</td>
<td>Receiving customer confirmation </td>
<td>$80</td>
</tr>
<tr>
<td>05.</td>
<td>Sending invoice & detail sheet for LC </td>
<td>$80</td>
</tr>
<tr>
<td>06.</td>
<td>Opening LC with the bank by customer </td>
<td>$80</td>
</tr>
<tr>
<td>07.</td>
<td>Receiving the copy of LC </td>
<td>$80</td>
</tr>
<tr>
<td>08.</td>
<td>Sending the shipping details </td>
<td>$80</td>
</tr>
<tr>
<td>09.</td>
<td>Sending current details & refunding the Advance payment </td>
<td>$80</td>
</tr>
<tr>
<td>10.</td>
<td>Receiving the balance money from customer </td>
<td>$80</td>
</tr>
<tr>
<td>11.</td>
<td>Sending “Gramaniladari documents " </td>
<td>$80</td>
</tr>
<tr>
<td>12.</td>
<td>Clearing vehicle documents from the bank by customer. </td>
<td>$80</td>
</tr>
<tr>
<td>13.</td>
<td><table><tr>
<td>name1</td>
<td>price1</td>
</tr>
<tr>
<td>name1</td>
<td>price1</td>
</tr>
</table> </td>
<td>$80</td>
</tr>
<tr>
</table>

Try This
<table width="100%" border="1">
<tr>
<td colspan="3"> </td>
<td width="25%"> </td>
</tr>
<tr>
<td width="25%"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td width="12%">1</td>
<td width="38%"> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
</table>

I think this is what you want
<table>
<tr>
<td><table><tr><td>Text here</td></tr></table></td>
</tr>
</table>

Related

how to create this table with HTML or MARKDOWN only? [duplicate]

This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 2 years ago.
I need to create a document with the table below, it can be either in HTML or in MARKDOWN, but I simply cannot do it. The difficult is in splitting the LATAM and ITPT into multiple rows. Can someone help please?
You can make this using colspan and rowspan on html based on table.
<table border="1" width="100%">
<tr>
<td colspan="2">HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C6Z</td>
<td>CHR</td>
<td>CHR</td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" style="writing-mode: vertical-rl; text-orientation: upright;">LATAM</td>
<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>
</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>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<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>
</tr>
</table>
td {
border: 2px solid black;
text-align: center
}
table {
border-collapse: collapse;
}
.break {
word-break: break-all;
width: 1em;
letter-spacing: 1em;
}
<table>
<tr>
<td colspan=2>HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C7H</td>
<td>C6Z</td>
<td>CHR</td>
</tr>
<tr>
<td colspan=2>BR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=5 class="break">LATAM</td>
<td>AR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CL</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CO</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MX</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>VE</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>ES</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>NA</td>
<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>
<tr>
<td rowspan=2 class="break">ITPT</td>
<td>IT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
Relatively painstaking, but it works
Using colspan and rowspan you can manipulate how each td is displayed, for example to output the structure you have shown in your design containing LATAM, you are required to use rowspan=5. This will indicate that the said td element will 'stretch', for want of a better word, over 5 rows.
Note I understand you have asked for this to be done in HTML only, the height and border are for better visualization.
td {
border: 1px solid black;
height: 32px;
}
<table>
<tr>
<td colspan=2>
HCM
</td>
<td>
C88
</td>
<td>
C7Z
</td>
<td>
C7H
</td>
<td>
C6Z
</td>
<td>
CHR
</td>
</tr>
<tr>
<td colspan=2>
BR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
L<br>A<br>T<br>A<br>M
</td>
<td>
AR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CL
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CO
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
MX
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
VE
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
ES
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
NA
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
I<br>T<br>P<br>T
</td>
<td>
IT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
PT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>

Creating complex table structure without using css

I am trying to make this table in HTML without using CSS, but I am not getting the desired output. I have tried a bunch of other combinations for the row with 6:2:3 rowspan.
This is the desired output
This is the code I am using.
<!doctype html>
<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="3"> </th>
<th colspan="3"> </th>
</tr>
<tr>
<th colspan="2"> </th>
<th rowspan="2"> </th>
</tr>
<tr>
<th> </th>
<th> </th>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td > </td>
</tr>
<tr>
<td > </td>
</tr>
<tr>
<td rowspan="6"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
Done Heights may not be set but it works properly
table,
td {
border: 1px solid black;
}
td {
height: 50px;
}
<table style="width:100%">
<tr>
<td>5</td>
<td colspan="3">
<table style="width:100%">
<tr>
<td>
<table style="width:100%;margin-top:50px;">
<tr>
<td>6</td>
</tr>
</table>
</td>
<td>7</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>
<table style="width:100%">
<tr>
<td>11</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td>12</td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
<td class="not">
<table style="width:100%">
<tr>
<td>13</td>
</tr>
<tr>
<td>14</td>
</tr>
<tr>
<td>15</td>
</tr>
</table>
</td>
<td colspan="2">
<table style="width:100%">
<tr>
<td>16</td>
</tr>
<tr>
<td>17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>18</td>
<td>16</td>
<td>20</td>
<td>21</td>
</tr>
</table>

How to build a complex table like image under bottom?

I have to make a complex and painful painting to put in place then that I take receive a collection of data with which I generate the table
I have under Laravel a data collection that I have to present as the attached image. Please help me build a picture similar to the picture:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" rowspan="2"> </td>
<td> </td>
</tr>
</table>
I think what you want is a complex header. Look here, hoping it helps.
<table id="example" style="width:100%">
<thead>
<tr>
<th rowspan="2"> </th>
<th colspan="2">Maths</th>
<th colspan="3">French</th>
<th colspan="2">Sport</th>
</tr>
<tr>
<th>Ex1</th>
<th>Ex2</th>
<th>Ex1</th>
<th>Ex2</th>
<th>Ex3</th>
<th>Ex1</th>
<th>Ex2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Johnson</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Franck</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

Table syntax is messy

I have a problem with writing a proper code for my table. Using the table feature in Dreamweaver it does help but when it comes on styling a single column or a row with CSS I see that my code is not properly written. For example if I want to style the first column I have to add class to each tr element. So I need your advice on how my table could be written in a more tidier way.
<table width="70%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe3">title</td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr class="qwe1">
<td>1</td>
</tr>
<tr class="qwe1">
<td>2</td>
</tr>
<tr class="qwe1">
<td>3</td>
</tr>
<tr class="qwe1">
<td>4</td>
</tr>
<tr class="qwe1">
<td>5</td>
</tr>
<tr class="qwe1">
<td>6</td>
</tr>
<tr class="qwe1">
<td>7</td>
</tr>
<tr class="qwe1">
<td>8</td>
</tr>
<tr class="qwe1">
<td>9</td>
</tr>
<tr class="qwe1">
<td>10</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="qwe2">title</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
You can see my code live here: http://codepen.io/mariomez/pen/XJqwYy
Ps: I don't want you to write the whole code or something just some tips on what things I should change in my code. :)
First of all, I'd say write just a single table instead of the tables per column you have right now. You can still keep the big title with red background using <td colspan="8">title</td> for that cell.
Once you have this single cleaned table you can use :first-child to select only the first tds inside a row, excepy maybe the main header. Then unleash your CSS magic.
I included a snippet doing just that here.
EDIT: Improved snippet here.
You don't need nested tables! Use colspan and rowspan to achieve desired output.
This is a great starting point to learn table element: complete guide table element.
This is a quick edit of your code: codepen.
Notice how I used colspan for the first row:
<td colspan="8" class="qwe3">title</td>

Simple one. How to remove horizontal gap between floating divs with tables inside

Ok, so, I have this simple HTML with DIVS, and tables inside those DIVS. I want them to be next to each other so I used CSS float. I can't remove the gap between the tables, and I want them to be separated just as they are.
Any ideas?
#charset "utf-8";
/* CSS Document */
div {
float: left;
}
<div>
<div>
<table width="328" height="450" border="0">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="226" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="163" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div>
<table width="263" height="450" border="0">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
</div>
Here is how it looks:
ScreenShot
Try adding
cellpadding="0" cellspacing="0"
to all of your table tags. This should remove any small spaces you might be having. It should look something like this:
<table width="328" height="450" border="0" cellpadding="0" cellspacing="0">
Here's a fiddle: http://jsfiddle.net/54aq3p86/
(I added a border in the fiddle so you could tell where the border's are)
Take a look At these code I just change the inline div style.
And Make the table border 1px to visible
Untitled Document
<body>
<div>
<div style="float:left">
<table width="328" height="450" border="1px">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="226" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="163" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="float:left">
<table width="263" height="450" border="1px">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
<div style="clear:both"></div>
</body>
</html>
Im guessing you only want to remove those two gaps right!?, not the ones provided by the cells!
here is a jsfiddle for you.
http://jsfiddle.net/4gLm20zq/1/1
Just add the cellpadding and cellspacing table atributes, just like I did in the jsfiddle example. I also added a class name to each div except for the main parent div. and added some new css rules. Give it a try and let me know if this works for you.
Here is the CSS
<style>
div.column {
float: left;
}
div.column:nth-child(even) {
margin: 0px -2px;
}
td {
background-color: #CCC;
}
</style>
And here is the html
<div>
<div class="column">
<table width="328" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td colspan="3" height="41"> </td>
</tr>
<tr>
<td colspan="3">Custo benefício</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Intermediário</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3">Alto Desempenho</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="3" height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="226" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="163" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Viseiras e reparos</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Motoclubes</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div><div class="column">
<table width="263" height="450" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="41"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td height="8">RODAPE</td>
</tr>
</table>
</div>
</div>