I am trying to create an HTML table where there are four columns and any number of rows. Inside this table, the first two columns are just normal cells. The latter two columns can have multiple rows WITHIN a row in the top-level table. My issue is how I can properly align the column separators, even if the length of the content in each cell is variable.
My attempt tries to make use of:
<td colspan=2>
Example of what I am trying to do: https://jsfiddle.net/hurnzhmq/
The things I am missing in the JSFiddle are:
There is no divider between the two rows separating Content3A/Content4A from Content3B/Content4B - I tried using the "bottom-border:none" for the last child, but that did not seem to work.
The column separators between Content3A/Content3B and Content4A/Content4B are not lined up with the header's column separator, and do not touch the ends of the table (there are gaps).
Any advice on how I might go about fixing this would be greatly appreciated!
I think you should use rowspan instead colspan
you can use code below
<html>
<table border=1 >
<tr>
<td>Header1</td>
<td>Header2</td>
<td>Header3</td>
<td>Header4</td>
</tr>
<!-- Content -->
<tr>
<td rowspan="2">Content1</td>
<td rowspan="2" >Content2</td>
<td > Content3A</td>
<td > Content2</td>
</tr>
<tr>
<td > Content3B</td>
<td > Content2</td>
</tr>
</table>
</html>
Related
I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?
<table>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
this is a test
</td>
<td style="padding:0px;">
as is this
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
<tr>
<td style="padding:0px;">
deleted the content to make this less to read
</td>
</tr>
</table>
and I get this weird little bit off the edge rather than the split I want:
Is it something to do with the aligned right image content in the table below possibly?
The number of columns in a table must be constant.
Add colspan="2" to your single cells.
A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.
Use colspan to make a cell take up multiple columns.
In your case, you don't appear to have tabular data at all, so don't use a table in the first place.
Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:
<tr>
<td style="padding:0px;" colspan=2>
deleted the content to make this less to read
</td>
</tr>
You'll need to do that for all the rows with just one column.
http://jsfiddle.net/9p7Mx/1/
I'm sure this has been asked before but I can't find the correct search terms:
If you have an HTML table such as:
<table>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td colspan="3"> </td>
<td> </td>
</tr>
</table>
The colspan=3 on the last row will not actually line up correctly because you don't actually have 4 td elements. If you look at my example link, I have two tables, one with two tds with colspan=2 and the last with four actual tds. In the first, the td elements are just mimicking 4 tds with their own colspan=2 and thus I assume the table has no way of knowing exactly how large a single colspan is since there is none. Without knowing the exact with on a single colspan, it appears the table doesn't know what to do.
If I can't change the number of td elements in the table, is it possible to get the same effect? I'd rather not assign a width using CSS, and assigning a width WILL work (tested) but I'd like to see if there is another way.
The markup violates the HTML table model, as http://validator.w3.org tells if you use it in HTML5 mode (“Table column 2 established by element td has no cells beginning in it.”). So you should expect inconsistent and unexpected rendering.
If your table logically has just three columns, make it so. Instead of trying to make some columns wider by using colspan, use CSS to set the widths. The colspan=2 attribute means just that the cell spans two columns. And you cannot validly span a column that does not exist.
Using classes and setting the width for the X% you want.
You must consider some divs instead of a table.
I don't understand why my column won't span to the top and bottom rows I created. It is supposed to look like the "Today" column is taller on the top and bottom then the other columns.
It's a lot of code, and I wasn't sure what I should cut without deforming it all or adding a new variable (it needs a fluid height).
JSFiddle: http://jsfiddle.net/DaAwesomeP/aU9Le/
Basic HTML Layout:
<table id="weatherForecast">
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="3">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
</table>
Here is an image that shows what I want:
The table markup violates the HTML table model rules, as the W3C HTML Validator tells you if you use it in HTML5 mode.
Since there are two cells on the second row, the first row should occupy two columns, too, so set colspan=2 on its td element.
And you cannot use rowspan=3, since there aren’t just enough rows in the table to span. Use rowspan=2 instead.
It’s difficult to tell what you actually want (a drawing would have helped), but the following would at least be valid HTML (note that I fixed a problem with duplicate id values too):
<table id="weatherForecast" border>
<tr class="weatherForecast-row-outer">
<td colspan=2></td>
</tr>
<tr id="weatherForecast-row">
<td id="weatherForecast-DATE" class="weatherForecast-day weatherForecast-day-today" rowspan="2">
<!-- Cell Content for "Today" Here -->
<td id="weatherForecast-DATE2" class="weatherForecast-day ">
<!-- Cell Content Here -->
</td>
</tr>
<tr class="weatherForecast-row-outer">
<td></td>
</tr>
I got rid of the all of the rowspan and just gave one cell display: block. I can then adjust the height of that cell specifically without changing the others. I used calc to provide a variable height.
Hi I need to create my table using like shown in the above image. Here I have given the code I tried. Could some1 please explain me the mistake I have made.
<table border="1">
<tr>
<td colspan="2" >Address
<tr><td>Address1</td><td>Address1</td></tr>
</td>
<td rowspan="2">Name</td>
</tr>
</table>
You scan cells row by row, and you mention a cell in your code as soon as you first hit it. Then you remember any cells that have colspan or rowspan, and when you reach their other parts in other rows, you don't put anything at all.
<table border="1">
<tr><td colspan="2">Address</td><td rowspan="2">Name</td></tr>
<tr><td>Address1</td><td>Address2</td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
For logo and and menu I have table with two rows. And Picture of person. Upper part of the body is on first row and lower part is on second row. First row should have only one td that is logo of the site and in second row i should make multiple td Can someone help me with that task. I should use tables because my client want it.
You can use the colspan attribute on a <td> element to make it fit more than one column, just increase the number to however many columns you want it to fit across
<table>
<tr>
<td colspan="2">Long column</td>
</tr>
<tr>
<td>Small</td>
<td>Column</td>
</tr>
</table>
jou can use collspan (like in cell[2,0]), further info: http://reference.sitepoint.com/html/td/colspan