I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
Why is this happening, and how can I get around this?
Two things you should do:
On the table element, use table-layout: fixed;
Insert columns and give them a width
(You could also assign width to table headers/cells of the first row)
Like this:
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->
Related
I'm having trouble trying to use tables as cells ( for responsiveness ) in my code.
I have 2 pieces of code, the first one (the expected behavior I'm looking) is a table of 637px with 2 tds splitting the size with %, the size splits correctly, one cell gets 319px, and the other one 318px.
<table style="width: 637px;" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td width="50.07849293563579%">THIS IS 319</td>
<td width="49.92150706436421%">THIS IS 318</td>
</tr>
</tbody>
</table>
The second (what my code looks like) is a main table with a td with 2 tables inside with float left and the same exact width used on the case 1. In this case table 1 is 318px, and table 2 is 318px. missing 1 pixel. where did it go? Am I doing anything wrong?
<table cellpadding="0" cellspacing="0" border="0" width="637px">
<tbody>
<tr>
<td style="width: 100%">
<table cellpadding="0" cellspacing="0" border="0" style="float: left; width: 50.07849293563579%;">
<tbody>
<tr>
<td>THIS IS 318</td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" border="0" style="float: left; width: 49.92150706436421%;">
<tbody>
<tr>
<td>THIS IS 318</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Is there anything I am missing?
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
I created a Bingo Card using Table in HTML. In the second column if I use the letter I, the size of the column automatically reduces and if I use any other letter then size of column comes back to normal. Why its happening so?
Table Image (using I in Column 2): http://imageshack.us/photo/my-images/21/18575712.png/
Table Image (using A in Column 2): http://imageshack.us/photo/my-images/580/11014314.png/
<html>
<head>
<title>Bingo Card</title>
</head>
<body>
<h2>Bingo Card</h2>
<table border="1px" width="50%">
<tr>
<th>B</th>
<th>A</th>
<th>N</th>
<th>G</th>
<th>O</th>
</tr>
<tr>
<td id="square0"> </td>
<td id="square1"> </td>
<td id="square2"> </td>
<td id="square3"> </td>
<td id="square4"> </td>
</tr>
<tr>
<td id="square5"> </td>
<td id="square6"> </td>
<td id="square7"> </td>
<td id="square8"> </td>
<td id="square9"> </td>
</tr>
<tr>
<td id="square10"> </td>
<td id="square11"> </td>
<td id="square12"> </td>
<td id="square13"> </td>
<td id="square14"> </td>
</tr>
<tr>
<td id="square15"> </td>
<td id="square16"> </td>
<td id="square17"> </td>
<td id="square18"> </td>
<td id="square19"> </td>
</tr>
<tr>
<td id="square20"> </td>
<td id="square21"> </td>
<td id="square22"> </td>
<td id="square23"> </td>
<td id="square24"> </td>
</tr>
</table>
</body>
</html>
I see the same issue in Chrome when column 2 contains an A. If you want to have a guaranteed column width you should explicitly define its size using either the <colgroup> tag or a corresponding width attribute:
<table border="1px" width="50%">
<colgroup>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
<col width="20%"></col>
</colgroup>
...
or
<tr>
<th style="width:20%">B</th>
...
The browsers just does not make any guarantee if you do not explicitily define the widths for the different columns.
UPDATE: From the HTML4 specification:
If an author specifies no width information for a column, a user agent
may not be able to incrementally format the table since it must wait
for the entire column of data to arrive in order to allot an
appropriate width.
You could try change the column width with css...
And I think it's happening because of the letter 'I' is "thin" compared to other letters, but I don't sure about that...
I think each character takes some space the width of i is less than A, to get resolved use a css style
td{width:20%} this should get resolved
In this simple case, it suffices, for most browsing situations, to set the column widths to the same (20%). However, in general, table cell and column width settings in HTML and CSS are just suggestions and may be overridden by browsers, on the basis of the contents requirements. (You can see this if you use a very narrow browser window width here.)
The way to prevent this is to use “fixed” table layout, e.g.
<style>
table { table-layout: fixed; }
th { width: 20%; }
</style>
“Fixed” layout has its implications. For example, if the content does not fit, it will get truncated.
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.