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.
Related
My horizontal rule is mixed up with part of the information on a table
So, my issue is to create two separate tables side by side, instead of one table below the other like usual. I did something that made it work but now my <hr> tag is mixed together with the tables.
<h3>Skills</h3>
<table style="float: left">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
That is the code. Can someone please help me put the horizontal rule below the table? As you can see from my code, the hr tag comes after closing the second table tag but my final output has mixed up the horizontal rule together with the table, instead of below it. What error have I made in my code? Any help would be appreciated, especially from my code. Somebody advise me on what's wrong with my code.
Also, I'm not pretty sure what is the work of the div tag since this was kinda an assignment if anybody can explain to me well, and why I put it in my code, I honestly don't know.
table {
float: left
}
hr {
clear: both
}
<h3>Skills</h3>
<table>
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="float: left">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
Change the styles of the <table>s to be displayed as inline:
<h3>Skills</h3>
<table style="display:inline">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
<table style="display: inline">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
<hr size="3" noshade="3">
JSFiddle.
Just an educated guess at this stage you have two
<table style="float: left"> have you tried
<table style="float: right"> for your second table? instead of left? Hope this helps!!
I've found the solution
I just had to put my two tables inside one main table, the two tables would be table data inside table rows
<h3>Skills</h3>
<table cellspacing="10">
<td>
<table cellspacing="10">
<tr>
<td>Sleeping</td>
<td>★★★★</td>
</tr>
<tr>
<td>Eating</td>
<td>★★★</td>
</tr>
</table>
</td>
<td>
<table cellspacing="10">
<tr>
<td>Gaming</td>
<td>★★★★★</td>
</tr>
<tr>
<td>Reading</td>
<td>★★★★★</td>
</table>
</td>
</table>
I have been working a lot on 2 columns inside of a table with the foundation framework. I cannot understand why column 2 is going down under column 1, when I resize my window to under 600px? I would like that the columns are staying beside each other, when the window is resized. I have set the column to fill 6 each, so the second column should not jump down?
Does anybody knows how I can solve this? The code is for email newsletter, that is why I am using tables.
I have a JSfiddle with the CSS code aswell: jsfiddle
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<table class="row footer">
<tr>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 1</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 3
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
<td class="wrapper">
<table class="six columns">
<tr>
<td class="left-text-pad">
<h5>Column 2</h5>
<table>
<tr>
<td>
A content text 1
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A content text 2
</td>
</tr>
</table>
<h5>A Headline</h5>
<table>
<tr>
<td>
A big text to test if the text is responsive.
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Above first wrapper class there is a tag.So write style inside tr tag like
As of this writing, there is still use of the nested table layout for most email clients. The answer for this is simple: Not all clients are up to speed, not all computers are up to speed.
Using tables in html emails is the most practiced and best method for overall deployment regardless of your email client. Foundation is nice, yes - but it is not the email industry standard as of yet.
Take a look at this handy tutorial from Mailchimp. I just wanted to clarify that you are not wrong for doing it this way, and you will be better off learning responsive email coding from the aforementioned tutorials first.
All that being said - what you've done in your jsfiddle is actually correct. But if you do NOT want them to collapse, simply remove the #media query strings.
Add "float: left" to the second wrapper of column2
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.
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>
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>