How to convert 2 column HTML table to 3 column - html

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.

Related

html table with various column count in each row

I would to make a table with various and independent column count in each row. for example the first row has 2 column and the 2'nd row has 3 column. I tried this with the following code, but it's wrong:
<table summary="worker_resume_user_info" style="width:100%">
<tbody id="2">
<tr style="border:none">
<td colspan="12">
</td>
</tr>
<tr>
<td colspan="4">
1
</td>
<td colspan="4">
2
</td>
</tr>
</tbody>
</table>
How can I do this?
Pretty much, you were really close.
You just needed to make sure that your addition is correct. Your two column colspan added must equal your 3 column colspan added. In this example 6+6 = 4+4+4
<table border=1 summary="worker_resume_user_info" style="width:100%">
<tbody id="2">
<tr style="border:none">
<td colspan="6">6</td>
<td colspan="6">6</td>
</tr>
<tr>
<td colspan="4">4</td>
<td colspan="4">4</td>
<td colspan="4">4</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zcjb23jo/
Not sure if this is what you are getting at but this table has 2 columns in the first row and 3 columns in the second row.
<table border="1">
<tr>
<td>
Column 1
</td>
<td colspan="2">
Column 2
</td>
</tr>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
</table>

HTML tables split cells into different number of columns for different rows not performing as expected

So I am trying to split cells in a table using colspan but I am seeing some odd behavior. In the code bellow the first table does not render as expected.
In particular the row with the 1/4 and 1/2 column are not spanning to 2x25% occupancy and then one that uses the remainder space, and this messes up the proper spanning of the 1/3 cells and 1/2 cells... On the other the second table looks as expected.
I am not sure if this is a bug in Chrome?? it seems to have also hill behavior in IE9, am i missing something here? Is there a better method to get this done?
You can see live version of code at: https://jsfiddle.net/4xwm33n6/
Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="50%" align="center">1/2</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
To do what you want to do you need something along the lines of:
<table>
<tr>
<td colspan="12">1/1</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>
This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...
Sorry for wrote comment like answer, I can't comment this post :(
colspan mean how many cells You want to merge, not width. You can't set width in colspan.
You should use colspan="#" using a number not a percent.
For example, if you want a td to go across two columns, use colspan="2"
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
https://jsfiddle.net/xxurc50n/1/

Make a <td> span the entire row in a table

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>

XSLT Count total number of rows in a Table

I'm working with XML that contains HTML Table with rowspan. I need to get the total amount of cols and rows of this table, I need to work this with xslt to do a transformation.
I'm trying to do something like this :
<xsl:value of select="count(./tr) - count(./tr/td/#rowspan > 1 and ./tr/td =1)"</xsl:value-of>
Of course, this doesn't work because I have some <tr> with more than one <td> . I need to count only when this two conditions are checked. I assume xslt looks ALL the <tr> and doesn't check in the same where the first condition is true.
Any help/suggestion?
In this Example, we have 5 , but the "real" count of should be 4. (The HTML output has 4 rows).
<table border="2">
<tr>
<td align="left" colspan="3" valign="top">
text
</td>
</tr>
<tr>
<td align="left" rowspan="3" valign="top">
text
</td>
</tr>
<tr>
<td align="left" rowspan="2" valign="top">
text
</td>
<td align="left" valign="top">
text
</td>
</tr>
<tr>
<td align="left" valign="top">
text
</td>
</tr>
<tr>
<td align="left" valign="top">
text
</td>
<td align="left" valign="top">
text
</td>
</tr>
</table>
I need to count all the rows with rowspan > 1, that have more than one
td.
There is only one like that:
<xsl:value-of select="count(table/tr[td/#rowspan > 1 and count(td) > 1] )"/>

Is it possible to set 4tds in first row and 3 tds in second row

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>