Is it possible to make a table with lets say 4 columns with of 1 row with 100px in width, and then have to cells below with a with of 200px without having to create a new table?
Because if i do this, then when i set the width of 200px in new cells, the other cell changes width too.. i want the to new cells to expand to fill up the rest of the width left.
Here an example..
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td width="200px">5</td>
<td width="200px">6</td>
</tr>
</table>
JsFiddle demo
you actally need to use colspan, so you code will be as below this will do the work you want
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>
<td colspan="number"> -number Specifies the number of columns a cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
Try removing the cell width from the second row, but add an additional attribute to each of them, so it reads like:
<td colspan="2"></td>
<td colspan="2"></td>
This should have both these cells account for 2 cells widths, without the need to redefine their widths.
MDN TD - Attribute Colspan
Related
I am new to HTML tables. I have a table as shown below. Is it possible to align the left of the value6 in the second tr to the left of the cell containing value3, which the third cell in the previous row? I tried style="padding-left:185px" as fixed padding, but it didn't give the desired result, especially in a responsive page design.
<table>
<tbody>
<tr>
<td class="form_label">value1</td>
<td class=" form_label">value2</td>
<td class="form_label">value3</td>
<td class=" form_label">value4</td>
<td class="form_label">value5</td>
</tr>
<tr>
<td colspan=" 5 " class="form_label " style="padding-left:185px ">value6</td>
</tr>
</tbody>
That might not be possible using css because of diverse size of devices. However, if you would be ok with splitting the second row into 2 cols, it might work. Try this code.
And also, you are missing the closing quote mark in your classes in all td in first row.
<table>
<tbody>
<tr>
<td class="form_label">value1</td>
<td class="form_label">value2</td>
<td class="form_label">value3</td>
<td class="form_label">value4</td>
<td class="form_label">value5</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3" class="form_label">value6</td>
</tr>
</tbody>
I need a clarification regarding colspan and width in html. Why can't I set width to a column that is spanned?
<table width='520'>
<tr>
<td width='60'><strong>A</strong></td>
<td colspan='2' width='100'><strong>B</strong></td>
<td colspan='2' width='100'><strong>C</strong></td>
<td colspan='2' width='100'><strong>D</strong></td>
<td width='60'><strong>E</strong></td>
<td align='center' width='100' ><strong>F</strong></td>
</tr>
<tr>
<td width='60'></td>
<td width='50'></td>
<td width='50'></td>
<td width='50'></td>
<td width='50'></td>
<td width='50'></td>
<td width='50'></td>
<td width='60'></td>
<td width='100'></td>
</tr>
</table>
The code is in above format. The column shrinks when there is no data, and column size increases when data size becomes larger.
You cannot simply change size of colspanned column because it has to fit to other columns in this table. It it a table constraint.
Beneath you have two columns with width=50 for every one double-column with colspan it means that it has to has width=100 which is actually 2 * 50.
You can modify you colspanned column with by modifying single columns width or adding more columns.
I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.
I have a table with two rows.
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.
I have this code for the table :
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.
If I give the first row's <td> the width value of 500px lets say, it sets the second row's first <td> to the same size.
What am I doing wrong ?
You should use the colspan attribute on the first row's td.
Colspan="3" will set the cell to flow over 3 columns.
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
You want to use the colspan attribute like this:
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center" >check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
If you're using JSX (React) it should be written like this. The s in colspan is capitalized and the value is a number instead of a string.
<td colSpan={3}>Text</td>
You can use colspan
<td align="center" colspan="3">check</td>
http://www.w3schools.com/tags/att_td_colspan.asp
Using colspan like this:
<tr>
<td align="center" colspan="3">check</td>
</tr>
By colspan you merge the following cells in a row to one. If you use 2 in your sample you get one cell with a width of the first two columns and the third is as the third in the rest of the table.
alter the first row with the below
<tr>
<td colspan="3" align="center">check</td>
</tr>
In my example jsfiddle I have two HTML tables. They are basically the same - same class, same content, everything. The only difference is the order of rows.
<style>
.tbl-lay-fixed {table-layout:fixed}
</style>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
</table>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
</table>
Table number 1 is displayed correctly - width of the cells is correct.
Table number 2 is displayed incorrectly - second row have two columns with witdh set as 5% and 95% accordingly, but instead it is displayed as 50% 50%.
Where is the problem? It is the same in all browsers.
This seems to work in Firefox at least
(changing bottom TD colspan to 20)
just remove "width="100%" <table class="tbl-lay-fixed" border="1" width="100%"> from the table class
Please see below html:
<table style="width: 700px;table-layout: fixed ; margin-top: 30px;" cellpadding="0" cellspacing="0">
<tr class="tableHeader">
<td width="220px">Event Name</td>
<td width="120px">City</td>
<td width="77px">Date</td>
<td width="110px">Price</td>
<td width="80px">Status</td>
<td width="60px">Select</td>
</tr>
</table>
<div style="overflow: auto;height: 360px; width: 730px;">
<table style='width: 700px;table-layout: fixed;' cellpadding='0' cellspacing='0'>
<tr >
<td colspan='6' >adnanpo </td>
</tr>
<tr >
<td width='220px' >adnanpo </td>
<td width='120px' > </td>
<td width='77px' >04/20/2012 </td>
<td width='110px' >USD $30.00 </td>
<td width='80px' >Paid </td>
<td width='60px' >
<input class='orgOkButton' type='button' id='btnOpenOrder' name='btnOpenOrder' onclick='return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')</td>
</tr>
</table>
</div>
Below part is casuing the issue:
<tr >
<td colspan='6' >adnanpo </td>
</tr>
Please sse the image, the column width is disturbed!! Please help me to fix it!
The obvious solution is to remove the tr element that causes the problem. It does not seem to have a function here. If you just want some spacer there, put a div element between the two tables.
The problem arises because table-layout: fixed tells the browser to decide on column widths according to the first row, if widths have not been set in certain other ways. Here the first row has just one cell that spans all columns, and then the defined behavior is to divide the width evenly between the columns.
Alternatively, set the column widths explicitly, e.g. using
<col width=220>
<col width=120>
etc. right after each <table> tag. But make sure that the sums of the widths add up to the number you set as the total width of the table (they currently don’t). When col elements are used that way to set all column widths, browsers will use those exact widths without questioning (which may cause problems, but I presume you have considered them).
Remove 'table-layout' property in your second table and it will work fine. And close you input element (onclick="return openOrderWindow('/RealResource/submitorder.aspx?OId=35731&EvtId=771')"/>)
If I understand correctly, you are worried to the fact that your columns are not aligning to the top.
Let me first suggest that you use the below CSS:
table { empty-cells: show; }
This will allow the empty cell you have to fill in the space. (otherwise you can just put an in it's blank space).
Also, I suggest you use one continuous table if you can.
Close your input-tag - the > is missing. If the problem is still there we can look further.
Yes this will be the case by using colspan in the "first row" of a table. To get around this you could do something like this (again just for the first row - you can use colspan fine further down):
<tr>
<td width="220px"><div style="position:absolute;width:220px;">adnanpo</div></td>
<td width="120px"></td>
<td width="77px"></td>
<td width="110px"></td>
<td width="80px"></td>
<td width="60px"></td>
</tr>