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>
Related
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>
Hi working to create a newsletter template. At the moment I am stuck as i am unable to change the alignment of the td
I have attached a CodePen, but below is the code! Firstly I don't understand why the elements on the right are aligned left-center? Eitherway I need them to be top-center. Any ideas?
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td>
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
Mind you this is for a newsletter template so think web 1998, most of the fancy web stuff is not usefull here!
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td>
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top; text-align:center">
<table width="393px" align="center">
<tr>
<td>
name
</td>
</tr>
<tr>
<td>
country
</td>
</tr>
<tr>
<td>text</td>
</tr>
</table>
</td>
</tr>
</table>
You have put align="center" in the td tag.
<table align="center" width="690px" bgcolor="#d3e1a3" border="1">
<tr>
<td>
<table width="297px" height="100%">
<tr>
<td align="center" >
<img src="https://www.naturimgarten.at/assets/images/4/Streicher-ff65c810.jpg" style="max-width:297px;" alt="placeholder" mc:edit="image">
</td>
</tr>
</table>
</td>
<td style="vertical-align:top;">
<table width="393px" align="center">
<tr>
<td align="center" >
name
</td>
</tr>
<tr>
<td align="center" >
country
</td>
</tr>
<tr>
<td align="center" >text</td>
</tr>
</table>
</td>
</tr>
</table>
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>
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>
See this:
_____ __
|_____| |
| |__|__|
|__|_____|
How to code it in HTML?
<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
Try this :-)
<table>
<tr>
<td colspan=2>top left</td>
<td rowspan=2>top right</td>
</tr>
<tr>
<td rowspan=2>lower left</td>
<td>center</td>
</tr>
<tr>
<td colspan=2>lower right</td>
</tr>
</table>
It produces
use colspan and rowspan, and set height and width.
<table border=1 height=400 width=400>
<tr>
<td colspan=2>1</td>
<td rowspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>8</td>
</tr>
</table>
http://jsfiddle.net/2b9K3/
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
This can be done pretty easily with rowspans and colspans.