I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.
Here is a picture of what I have now
I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
Here is a fiddle that I have:
http://jsfiddle.net/9n3oyf2w/
<!-- This works: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="1">3</td>
<td colspan="5">4</td>
</tr>
<!-- This doesn't work: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="6">3+4</td>
</tr>
I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.
EDIT:
New pic for what I am trying to achieve:
link
So you want something like this?
table, th, td{
padding: 0;
margin: 0;
border-collapse: collapse;
border:0;
border-spacing:0;
margin-left: auto;
margin-right: auto;
}
table.topInnerTable, table.topInnerTable td{
border: 1px solid black;
border-bottom: 0;
}
table.bottomInnerTable, table.bottomInnerTable td{
border: 1px solid black;
}
<table width="960px">
<tr>
<td>
<table class="topInnerTable" width="100%">
<colgroup>
<col width="320px">
<col width="320px">
<col width="320px">
</colgroup>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="bottomInnerTable">
<tr>
<td width="80px">1</td>
<td width="80px">1</td>
<td width="800px">10</td>
</tr>
</table>
</td>
</tr>
</table>
I believe this is what you want
<table width="100%">
<tr>
<td colspan="3" width="33%">a</td>
<td width="33%">b</td>
<td width="33%">c</td>
</tr>
<tr>
<td width="10%">1</td>
<td width="10%">2</td>
<td colspan="3" width="80%">3+4</td>
</tr>
</table>
Related
I want to create a table as given. I have written the code for the first two columns but the output is incorrect. Need help figuring out my mistakes.
Ignore the little imperfections of the image of the table given in the question. They are not part of the output I desire.
Question-
My attempt for first two columns-
<table border="1" width="50%" height="50%">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
<tr>
<td rowspan="0" colspan="0"></td>
<td rowspan="3"></td>
<td rowspan="1"></td>
</tr>
</table>
Output-
What am I missing here?
I believe that this is what you're after:
table, td {
border: 1px solid #999;
}
table {
width: 100%;
}
td {
height: 50px;
}
<table>
<tr>
<td rowspan="4"></td>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
How can I create a table with the following layout?
I'm having problem with the second and third td in the first row. I've been playing with colspan but couldn't get it to work.
Think of a table with 7 cells per row to get that cell distribution (1 + ( 2 * 3 ) cells) and use colspan attributes as follows :
table {
width: 100%;
}
td {
border: 1px solid #777;
padding: 10px;
}
td:first-child {
width: 30%;
}
<table>
<tr>
<td>a</td>
<td colspan="3">b</td>
<td colspan="3">c</td>
</tr>
<tr>
<td>a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
<td colspan="2">d</td>
</tr>
</table>
Try this
<table>
<tr>
<td>td</td>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>td</td>
<td>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
The colspan will always align to the upper/lower row column. To tackle the problem find a common multiplier of merging cells (in your case 6. 6 can be grouped in 3x2 width span or 2x3 width span). Create a table with 1 (common leftmost column)+6 columns total 7 columns. Then merge for top row 3 columns and again 3 columns. For second row merge 2 columns 3 times.
Like this:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td colspan="3"> </td>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
You must consider 7 columns initially. Try following
table, th, td {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<td>Jill</td>
<td colspan="3">Smith</td>
<td colspan="3">Smith</td>
</tr>
<tr>
<td>Jill</td>
<td colspan="2">Smith</td>
<td colspan="2">50</td>
<td colspan="2">Jill</td>
</tr>
</table>
I have a table with a lot of records and a search box
<table>
<tr>
<td class="col-3">name1</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
.col-3{
width:33,33%
}
Some of the records may be displayed as none, so if the search box returns a full "none" column it gets wraped to none as if it didnt have the "witdh:33,33%" atribute.
Anyone knows a way to keep the elements in his original size even if they dont have content?
Thanks in advance.
Try table-layout: fixed along with a fixed width for the table
table {
width: 100%;
table-layout: fixed;
}
.col-3 {
width: 33, 33%;
border: 1px solid grey;
}
<table>
<tr>
<td class="col-3">name1 askdlhaslkdhsaldsad asjd;kadaj as;dj;asjd as ;asjsd;asjd;ja</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
This is a table that I would like to achieve:
But I keep getting something like this:
This is what I've tried:
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
Here's a link to JSFiddle with this (with some extra code for illustration): http://jsfiddle.net/2292D/
You need only vertical-align:middle and text-align:center
Apply this css to div
div {
display:table-cell; // Change
vertical-align:middle; //Change
border: 1px solid blue;
}
td {
border: 1px solid red;
text-align:center; // Change
}
Fiddle Demo
Good old days using table, use rowspan and colspan to achieve that kind of tablular structure, if you are using this for layout than don't, use div instead with float and CSS Positioning.
Demo
<table border="1" width="100%">
<tr>
<td rowspan="2" width="30%">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2" width="70%">d</td>
<td>e</td>
</tr>
</table>
I guess you need 3 rows for that, try my code:
<table>
<tr>
<td rowspan="2"><div id="a">a</div></td>
<td colspan="2"><div id="b">b</div></td>
</tr>
<tr>
<td colspan="2"><div id="c">c</div></td>
</tr>
<tr>
<td colspan="2"><div id="d">d</div></td>
<td><div id="e">e</div></td>
</tr>
Here's my fiddle: http://jsfiddle.net/LLe5c/
apply your id on td
html:
<table>
<tr>
<td id="a" rowspan="2"><div>a</div></td>
<td id="b" colspan="2"><div >b</div></td>
</tr>
<tr>
<td id="c" colspan="2"><div >c</div></td>
</tr>
<tr>
<td id="d" colspan="2"><div >d</div></td>
<td id="e"><div >e</div></td>
</tr>
</table>
Here is the Solution
<table>
<tr>
<td rowspan="2">a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="2">d</td>
<td>e</td>
</tr>
</table>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
td {
border: 1px solid red;
}
</style>
This is an easy question, but I cannot seem to solve it. My html table can be seen at the following:
http://jsfiddle.net/Rochefort/kvUKG/
And also included here:
<table style="background:#fff;width:300px;margin-left:14px;" class="form">
<tbody>
<tr style="">
<td class="bosluk"></td>
<td class="alis_baslik"><strong>ALIŞ</strong></td>
<td class="satis_baslik"><strong>SATIŞ</strong></td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar">DOLAR</td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
<tr style="border-bottom:1px solid #e4e4e4;">
<td class="ikonlar"><strong>$ </strong></td>
<td class="kurlar"><strong>DOLAR</strong></td>
<td class="alis">2.2804</td>
<td class="satis">2.2914</td>
</tr>
</tbody>
</table>
I implemented CSS but the DOLLAR item has too much space. How can I remove this extra space?
You can use text-align: right with padding-right instead of padding-left.
Example: http://jsfiddle.net/BfD2v/
.ikonlar {
padding-right:5px;
font-family: Arial;
font-size:12px;
font-weigth: bold;
color: #000;
text-align: right;
}
If you want to make the whole column narrower, you can set the width od the column with this:
.bosluk, .ikonlar {
width: 10px;
}
You should also probably use <th> tags for the headers. The columns would align themselves under the <td> tags then. Like:
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>