Can anybody explain the behaviour of the following html page, which is an extract of a legacy application?
My question is: between "My sample text here T1" and "My sample text here T2", the rendering is totally different, and the only difference is that there is a parent table around the second one.
My understanding of html is that table is a block level element that computes its width depending on the content, and I do not understand why there is a such difference in the rendering of this sample.
If anybody knows why and this behaviour can be controlled without forcing the width or using white-space:nowrap, I would be really thankful.
The code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- Problem is here : addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
And the rendering :
The answer is that the outer td in T2 does not explicitly know its width and neither table, tr, nor td are block elements. See this fiddle: https://jsfiddle.net/fordareh/u6j64tso/
Basically, you need the outer table to have an explicit width:
<table style="width: 100%"><tr><td>
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T2</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
</td></tr></table>
table shrinks on its content, if nested, inline content might shrink too since parent has no width specified for child to use.
you may remove width style and maybe use a block element so it can receive width, min-width, max-width without interfering with the table layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<!-- rendering is correct -->
<table>
<tbody>
<tr>
<td style="width: 30%"> </td>
<td style="width: 35%">My sample text here T1</td>
<td style="width: 35%"> </td>
</tr>
</tbody>
</table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td>My sample text here T2</td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
<!-- addition of a parent table. -->
<table><tr><td>
<table>
<tbody>
<tr>
<td> </td>
<td><p>My sample text here T3</p></td>
<td> </td>
</tr>
</tbody>
</table>
</td></tr></table>
</body>
</html>
Related
I have 2 HTML tables with exactly the same code in both cases. I have used "colspan" there to differentiate 2 columns on the table. The main table width is colspan 65, and the columns are colspan 5 and 60 respectively. But in the 2 tables, the width of the columns are showing different.
I have tested all the codes. Both table have same code, I have used table-cell property but it is still not working. There was no specified width to any columns either.
Here is the syntax of both of my tables:
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th colspan="65">Title</th>
</tr>
<tr>
<td colspan="5">xxx</td>
<td colspan="60">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td colspan="5">aaa</td>
<td colspan="60">
<h4>bbb</h4>
</td>
</tr>
....
</tbody>
</table>
You can check the live page here.
You can see 2 tables are there. 1st column of both tables are of different width irrespective of same code.
Thank you for checking.
Your page suffers many errors as you can see on this unicorn test result:
https://validator.w3.org/unicorn/check?ucn_task=conformance&ucn_uri=https%3A%2F%2Fwww.learnx.net%2Flearnx-agenda%2F&ucn_lang=en
There are many parse errors, unclosed tags which could lead to errors
like this.
Why are you using inline code if you´re using css classes to style the table?
In your pages css i´ve found this definition:
.agenda-table {
max-width: 96%;
margin: 100px auto 0;
}
so why are defining the witdh with inline code again?
style="width: 100%;"
I´ve taken your the code from your question and replaced
the inline code with classes and added some css.
css example:
* {
margin :0;
padding :0;
}
.agenda-table {
margin : 0 auto;
width : 100%
}
.agheader {
float : left;
width : 65%;
background : #f442bc;
}
th, tr {
float : left;
width : 100%;
text-align : left;
}
.left {
float : left;
width : 5%;
border-right : 1px solid #f442bc;
}
.right {
float : left;
width : 60%;
}
example html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class="agenda-table">
<tbody>
<tr class="agheader">
<th>Title</th>
</tr>
<tr>
<td class="left">xxx</td>
<td class="right">
<h4>yyy</h4>
</td>
</tr>
<tr>
<td class="left">aaa</td>
<td class="right">
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is a fiddle that shows that this example works: https://jsfiddle.net/Thorske/bL5ktrga/11/
The float definition may not be necessary since it´s a table but
this would allow to easliy switch from tables to lists.
Use an equal percentage width in the first row of each table.
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th style="width: 35%">xxx</th>
<th>Title 1</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
<table class="agenda-table" style="width: 100%;">
<tbody>
<tr class="agheader">
<th style="width: 35%">xxx</th>
<th>Title 2</th>
</tr>
<tr>
<td>xxx</td>
<td>
<h4>yyy</h4>
</td>
</tr>
<tr>
<td>aaa</td>
<td>
<h4>bbb</h4>
</td>
</tr>
</tbody>
</table>
I have to make a table using the table element in HTML. The table should look like this: required Table image
But at the moment my table looks like this: My Table image
I've tried to fix it numerous times. but I just can not figure it out.
heres my HTML code aswell.
Please help
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td> Advertisement Space </td>
<td> Blog Links </td>
</tr>
<tr>
<td> Main Content Area</td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
The HTML below creats a table like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Page header</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<td colspan=4>Page Header </td>
</tr>
<tr>
<td rowspan=2>Menu: </td>
<td colspan=2> Advertisement Space </td>
</tr>
<tr>
<td> Main Content Area</td>
<td> Blog Links </td>
</tr>
<tr>
<td colspan=4>Footer </td>
</tr>
</body>
</html>
What you need to change:
Set colspan for the "Advertisment Space"
Move "Blog Links" to the same row as "Main Content Area"
Although I must say that tables are absolutely not state of the art when it comes to designing a website layout. <table> is used do display data (like a list or, well, a table).
<div> and <span> should be used to apply a layout to a website
Just correct with:
<td rowspan="2"> Blog Links </td>
Side comment: you seem to be building the layout of the page using html tables. Bad idea, read this.
Also, html attributes, to be correct, require quotes, i.e. <elem attrib="value">
Close off your table:
<table border="1" width>Table data...</table>
Give menu rowspan 4 and change accordingly.
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 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
I am trying to align 3 tables side-by-side. It doesn't work when I put a table inside another table because the middle table has a lot of content which then makes my first table vertically too big and doesn't look right.
What I am trying to do is make a simple page where I have my first table with 3 rows down. My 2nd table is just a 1 column, 1 row layout for content and my 3rd table is also 1 column and 1 row. I need these tables to be side-by-side.
I have searched the web and cannot find anyone that can do this. When I add the tables they stack on top of each other. Can someone help me with getting my 3 tables to be side-by-side?
<table width="100" border="1">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
<table width="100" border="1">
<tr>
<td> </td>
</tr>
</table>
If this needs CSS coding can you provide this as well, it would be much appreciated, I'm still learning advanced CSS and HTML.
Add style="float:left;" to each table. eg:
<table width="100" border="1" style="float:left;">
(advanced) CSS:
table{
float:left;
}
If you have to use tables (and you do for things like HTML email), you should be able to accomplish most things with nesting tables. Have you tried using one wrapper table with three cells, then putting your three tables each inside one of the cells from the wrapper table? Dreamweaver is a really good tool for tables. If this is not tabular data, or an HTML email, you should consider a layout not based on tables.
<!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>
</head>
<body>
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td rowspan="3"> </td>
<td rowspan="3"> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
how about this
Since there has been changes in CSS and Flexbox, etc. There are a couple of ways.
Wrap all the tables in a div.
<div class="main">
<div id="table1">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div id="table2">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
<div id="table3">
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</table>
</div>
</div>
Then using a flex display on the main class, and then justify-content as follows:
.main {
width: 1800px; //depending on how wide you want the table window
min-height: 615px; //same as width
margin: 0 auto; //to center the content on your screen
display: flex;
justify-content: space-between;
}
This would separate your tables in one line.
The other option is to use css grid, but won't get into that here. There are a bunch of tutorials online.