While looking at table structure with rowspan and colspan, I stubbled upon two instances which were interesting.
View jsfiddle
The first table should have three rows, but the last row stays in the second row. While I understand that this is fixed if I change the bottom rowspan to 1, instead of 2, why doesn't it work this way?
<table border="1">
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td colspan="4">bottom</td>
</tr>
</table>
The second table should have a bottom border, but does not show one. Again, I realize the bottom row and the left box would work with a rowspan of 2 for the left side, and a rowspan of 1 for the bottom row, but I was wondering why it doesn't work the way I showed in jsfiddle.
<table border="1">
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
</tr>
</table>
The 1st table is malformed because all of the columns from above have rowspan > 1. The 3rd row has no columns left in which to add a cell, but you have colspan=4.
The second table is malformed because all of the columns in the second row have rowspan > 1, hence there is no final row and no bottom border.
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 have been wondering quite a long , that how the percentage width in table cells work in HTML.
Case 1: No table width specified, single row and columns are not given full space
<table>
<tr>
<td width="25%">mango</td>
<td width="25%"">apple</td>
</tr>
</table>
Case 2: No table width specified,single row and columns are given full space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
</tr>
</table>
Case 3: No table width specified,single row and columns are given more than 100% space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
<td widht="100%">guava</td>
</tr>
</table>
Case 4: No table width specified, multiple rows specified and columns are giving following percentage configurations
<table>
<tr>
<td width="33%">mango</td>
<td width="33%"">apple</td>
<td widht="33%">guava</td>
</tr>
<tr>
<td width="50%">papaya</td>
<td width="50%">pomengrante</td>
</tr>
</table>
Their outputs I am not able to correlate , please help me in this
The percentage will works depending On any Screen Resolution Equal to 100% So You Divide That Percentage In To Your Requirement Measurements In Percentages Example As Given below,(In Table tr width(100%)=(Addition of td(widths))
<table style="width:100%;" border="1">
<tr>
<td wdith="50%">Mango</td>
<td wdith="50%">Lemon</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
<!--This Is Another Type Of Table-->
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="33%">Mango</td>
<td wdith="34%">Lemon</td>
<td wdith="33%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td><td>some Item</td>
</tr>
</table>
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="25%">Mango</td>
<td wdith="25%">Lemon</td>
<td wdith="25%">Something</td>
<td wdith="25%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
The cells will work with relation to their table, but also they need to take up 100% of the table width. So that makes your case1 not work. it will split it up as 50%. But a case where you set this will work, as it's 100% of the table width.
Demo
<table>
<tr>
<td width="20%">mango</td>
<td width="80%">apple</td>
</tr>
</table>
If you need something to take up 25-25, then maybe you should look into using divs instead.
Also your last case will not work as you need to have the same amount of cells in the table.
Having some trouble figuring out what the grid is like for using colspan, so that I can evenly align my items.
HTML
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</tr>
</table>
What this does
As you can see, the following texts are pushed back each row further and I do not know why. I am trying to just keep the initial value (index, create, confirm, choose) as the only item in colspan=4, then everything else to be after that.
I also have bootstrap included in case they use some nice template.
It looks like you have a misplaced closing tr tag </tr> at the end of your table.
Please fix it and check again to see if the layout is displayed correctly
Your code should became something like this:
<table class="table MethodList" ng-repeat="method in api.methods">
<tr>
<td colspan=4 style="font-weight:bold">{{method.name}}</td>
<td colspan=8>{{method.desc}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8 style="background:#E6E6DA">{{method.parameters}}</td>
</tr>
<tr>
<td colspan=4></td>
<td colspan=8>{{method.additional}}</td>
</tr>
</table>
I am trying to create this layout with tables in HTML using rowspan and colspan but the size of a cell is not showing how I expected, the value of rowspan and colspan of the cell "X" are "2" but the tables are created like it where 2x1.
Here is my code
<html>
<head>
</head>
<body>
<table border="3" cellspacing="5" cellpadding="3">
<tbody>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td rowspan="2" colspan="2">X</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td rowspan="1" colspan="4">4</td>
</tr>
<tr>
<td colspan="3">5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
This is working properly. It's easiest to see if you add a row that has all four cells occupying a single column:
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
http://jsfiddle.net/ExplosionPIlls/HfHBU/
You're facing a visual problem caused by the there is no third column cell to create any width. The entire third column is created by colspans on X, 4, and 5, so it will appear to have no (or very little) width, and the cells will not expand without width rules if they don't have to.
Is it possible to lay out a table with 2 columns. The first column with many td's, the second one with only one?
Yes, use colspan...or you might want rowspan (colspan's opposite :))
Directly from the article (with enclosing the attributes in quotes:
<TABLE BORDER="2" CELLPADDING="4">
<TR> <TH COLSPAN="2">Production</TH> </TR>
<TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR>
<TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR>
<TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR>
<TR> <TH COLSPAN="2">Sales</TH> </TR>
<TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR>
<TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR>
<TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR>
</TABLE>
Here is the W3 article
yes use rowspan or colspan to merge td. Example:
<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td rowspan="3"></td>
</tr>
</table>