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.
Related
I want to create table with main section and subsections like that
I tried
<html>
<body>
<table style="width:100%">
<tr>
<td rowspan="3">section</td>
<td rowspan="3">subsection1</td>
<td rowspan="2">subsection1</td>
<td rowspan="1">subsection1</td>
</tr>
<tr>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
...
</table>
</body>
</html>
but this code dont create dont create subsections. Surrounding subsection1 with also dont create subsections.
The rowspan attribute indicates the number of rows a cell should take up. There are 6 rows total in your table, so if you want a cell to span to the last row of the table, you specify rowspan="6". Note that the rowspan values should sum up to the same number for each column, the default value being 1.
<table style="width:100%">
<tr>
<td rowspan="6">section</td>
<td rowspan="3">subsection1</td>
<td>text1</td>
</tr>
<tr>
<td>text2</td>
</tr>
<tr>
<td>text3</td>
</tr>
<tr>
<td rowspan="2">subsection2</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
</tr>
<tr>
<td rowspan="1">subsection3</td>
<td>...</td>
</tr>
</table>
See this JSFiddle
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 creating one html table but i am confused with
Can any one help me to create table like attached image with color combinations.
Thank You.
Try this code. You can change the color according to your choice
<table border="1" width="50%">
<tr style="background-color: #090">
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
<tr style="background-color: #7aba7b">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="background-color: #99BC99">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
Some basic HTML stuff for tables:
<table> </table> = table tag
<tr> </tr> = row tag
<td> </td> = cell tag
So you put it all together like so:
<table>
<tr>
<td> cell content </td>
</tr>
</table>
Repeat rows and cells as needed. Then add some styling with some CSS or something. Now go try it!
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.