I have to create a simple table within a table. i am using following html code for making as simple page. please copy and paste it to file for understand the problem correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td>
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
The main problem is in my right side part of table I have some searched information, and left side some refine search panel. so when my page comes, my refine search window comes exact middle. i want my left part of table is to aligned on table, where my start.
Please help me to resolve this.
valign="top" in the correct column would be a simple solution to your prob.
like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td valign="top">
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
edit:
style="vertical-align:top;" if you use css
Related
When I use <table> with <tr> and <td> I always get NxN tables and not what I want.
For example:
<table border = "1">
<tr> <td> Do you love peanuts? This is a very important question. </td> </tr>
<tr> <td> Yes, I do. </td> <td> No, I don't. </td> </tr>
</table>
And yet, it looks like a 2x2 as one there is a blank square created over the page.
An example is here.
How can I make the first row (with the one element) spread the same as the one with two elements. I'm not talking about minimizing number of lines (in the text) or whatever, I mean just stretching it up to there.
You can solve this using the attribute colspan on the td tag:
<table border = "1">
<tr>
<td colspan="2">
Do you love peanuts? This is a very important question.
</td>
</tr>
<tr>
<td>
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
Check this link
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">Do you love peanuts? This is a very important question.</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td width="250px">
Yes, I do.
</td>
<td>
No, I don't.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have one question regarding the HTML tables that I couldn't manage to find myself.
Is it possible to create this layout using HTML and inline css within one table?
I tried to merge my cells in 4th row (I've started with 3 column layout) because I need 2 cells, and if my table width is 640px, and I force 320px for both cells, whole table gets messed up.
EDIT: 4th row is the issue, I need 2 equal width cells in it.
Thanks in advance.
<table border=1>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
All cells in the same column have to be the same width, so you need an extra column:
First row: one cell colspan=4
second row: one cell, on cell colspan=2, one cell
Third row: one cell colspan=4
Fourth row: one cell colspan=2, one cell colspan=2
The widths for each column then look something like:
Column 1 is narrow, let's say width=50px
Column 2 is 320 - column1's width, 280px
Column 3 same as 2, 280px
Column 4 same as 1, e.g. 50px
<table border="1">
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td>cell</td>
<td colspan="2">cell</td>
<td>cell</td>
</tr>
<tr>
<td colspan="4">cell</td>
</tr>
<tr>
<td colspan="2">cell</td>
<td colspan="2">cell</td>
</tr>
</table>
<table border="1" width="100%">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td width="10%">Cell</td>
<td colspan="2">Cell</td>
<td width="10%">Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2" width="50%">Cell</td>
<td colspan="2" width="50%">Cell</td>
</tr>
Check the DEMO
Use like this. it works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<table width="640" cellspacing="5">
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td>Cell</td>
<td colspan="2">Cell</td>
<td>Cell</td>
</tr>
<tr>
<td colspan="4">Cell</td>
</tr>
<tr>
<td colspan="2">Cell</td>
<td colspan="2">Cell</td>
</tr>
</table>
</body>
</html>
I have following table structure
<table>
<table>
<thead>
<tr>...header template...</tr>
</thead>
</table>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<table>
My problem is that the datarows and header rows are not aligned to each other.
The table structure looks wierd.
Any clue how can i make them aligned.
Edit:
I have used Jqgrid to populate my grid.
The table structure which jqgrid produces is like the above one.
If i dont wrap within tag, then the first inside disappears.
Somewhere i found that jquery.clean will clean up if we dont wrap within table.
do u guys have any idea on this
You have so much syntax errors.
This is normal table:
<table border=1>
<thead>
<tr><th>header template</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</tbody>
</table>
A table have head and body and each can have rows and columns:
<table>
<thead>
<tr><td></td></tr>
</thead>
<tbody>
<tr><td></td></tr>
</tbody>
<table>
You can also see following link for more details.
Cheers !!
Try using a syntax like this:
<table>
<thead>
<tr>
<th colspan="2"> ...header template... </th>
</tr>
</thead>
<tbody>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
</tr>
</tbody>
</table>
Im really stuck making the markup for this kind of table I almost spend 2hrs reading the difference between rowspan and colspan. Im badly need help for this guys.
Thanks
Code for first two rows:
<html>
<head>
<title>
</title>
</head>
<body>
<table border="2">
<tr>
<td rowspan="2">Diversifier Portfolio PDF</td>
<td>Investment Management</td>
<td>0.30%</td>
<td rowspan="2">0.40%</td>
</tr>
<tr>
<td>Administration</td>
<td>0.10%</td>
</tr>
</table>
</body>
</html>
Edit: I was too slow :'(
Repeat the same for three times
<table border="1">
<tr>
<td rowspan="2">
Divers
</td>
<td>
Invest
</td>
<td>
0.30%
</td>
<td rowspan="2">
0.40%
</td>
</tr>
<tr>
<td>
Invest
</td>
<td>
0.10%
</td>
</tr>
</table>
I have a table in td
<td style="height:100%">
<table>
<table>
<td>
The td is not fixed, it is of variable height, i want to set the table height according to the td.
Please provide your valuable suggetions to achive this.
Here is a static code which works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td height="100px">
<table border="1" height="100px">
<tr>
<td>1.1</td>
<tr>
<td>1.2</td>
</tr>
</tr>
</table>
</td>
<td>3</td>
</tr>
<tr>
<td height="100px">4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
I am working to make it as dynamic as possible.
Hope this will help you.
Wouldn't just setting the height of the table work as you've done for the td?
<td style="height:100%;">
<table style="height:100%;">
<table>
<td>
The problem is that your nested table don't have inside this:
<tr><td>content</td></tr>
Get an example: FIDDLE