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.
Related
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>
I'm very new to HTML. I have an HTML document that is built using a 2 column table. I am now needing to set up a row with 3 columns. From the research that I've done, it seems that I can't just add a column to 1 row, rather I need to work with a 3 column table and use colspan in the other rows to make things work. Is that correct?
I've tried adjusting the existing colspans from =2 to =3 and adding a new column to the desired row but to no avail. Can you tell me what is wrong with my approach or how to properly convert the existing 2 column table to a 3 column structure?
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0" style="border:1px solid #000000" >
<tr>
<td colspan="2" width="768" height="160" border="0" style="display:inline" /></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td width="256"></td>
<td width="256"></td>
<td width="256"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
<table border="1">
<tr> <!-- row with 3 columns -->
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr> <!-- row with only 2 columns, where the second column is as wide as the second and third column, above -->
<td>2x1</td>
<td colspan="2">2x2</td>
</tr>
</table>
This is how to get a table with N rows and 3 columns. Is it what you were asking for? It would be useful if you could paste some code!
See this page to learn more about colspan:
http://www.w3schools.com/tags/att_td_colspan.asp
EDIT:
In your code you have written the table to display only 2 columns for every row.
You have to add a <td> tag to display another column per row.
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
I am new to HTML and CSS designs. I have the below code.
<html>
<body>
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td >wqewqehkjfoiw</td>
<td >abcdefdsfds</td>
<td >sdfdsfdsfdsf</td>
<td >dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The first and second rows have 4 tds of equal width. Now on third row, i wanted to have 3tds with equal width. But it is not working with the above code. Pls help
You should consider using a grid system (like http://960.gs/) instead of tables.
If you still want to use tables, use the colspan attribute:
<html>
<body>
<table width="100%">
<tr>
<td colspan="3" width="25%"> </td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
</tr>
<tr>
<td colspan="4" width="33%">wqewqehkjfoiw</td>
<td colspan="4" width="33%">>abcdefdsfds</td>
<td colspan="4" width="33%">>sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The table above has 12 columns, so for N tds, use colspan="12/N".
<table width="100%" border="5">
<tr>
<td colspan="25%"> </td>
<td colspan="25%"></td>
<td colspan="25%"></td>
<td colspan="25%"></td>
</tr>
<tr>
<td colspan="25%">wqewqehkjfoiw</td>
<td colspan="25%">abcdefdsfds</td>
<td colspan="25%">sdfdsfdsfdsf</td>
<td colspan="25%">dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td colspan="34%">wqewqehkjfoiw</td>
<td colspan="33%">abcdefdsfds</td>
<td colspan="33%">sdfdsfdsfdsf</td>
</tr>
</table>
The way you tried won’t work because it does not correspond to the HTML table model, or any logical table structure. What browsers do in practice is (as you probably noticed) that they treat the row with three cells as if it had a fourth, empty cell. And then they more or less ignore the conflicting width settings.
Among the possible workarounds, the cleanest (and most common) is probably the use of nested tables. You would replace the last row cells by a single cell that spans all the four columns and contains an inner one-row table. The last row could thus be:
<tr>
<td colspan=4>
<table width=100%>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</td>
</tr>
I'm trying to make a table in html, using fixed sizes and column spanning.
Here is the code I am working with:
<table style="width:602px;" border="1" cellspacing="0">
<tr>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2">content</td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
</table>
This works as I expect on chrome (creating 2 double length cells in the first row, and then three rows of single-double-single length cells). However, in IE8 the middle cell in the bottom 3 cells is sized to fit the "content", not to the size I defined.
Am I doing something wrong, and how should I change this to make it work as I want? Is there a better way to do what I'm trying to do?
Remove your table width, and you'll see how your table behave...
Yes, all your columns are trying to be 298px wide. This is because a table try to fit its column width with its first row... Remove the useless declaration and try this :
<table border="1" cellspacing="0">
<tr>
<td style="height:148px;" colspan="2">1fdasfsdafsdfas</td>
<td colspan="2">1</td>
</tr>
<tr>
<td style="height:148px; width:148px;">1</td>
<td style="width:298px;" colspan="2">1</td>
<td style="width:148px;">1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
</table>