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.
Related
EDIT: The following outlined example works in thunderbird as well.
I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.
The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td>Expand small only</td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:
Here is what it looks like in outlook when I send an email:
For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.
This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.
See https://github.com/foundation/foundation-emails/issues/415 for more information.
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>
I want to create a link which will delay for 5 seconds before directing to the data. I am told the meta tag ca be used for this.
Please have a look at my code:
<html>
<head>
<title> ABC.com</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" width=768>
<tr>
<td>ABC.com Logo</td>
</tr>
<tr>
<td align="center">
LOGIN
</td>
</tr>
<tr>
<td align="right"> copyright abc.com</td>
</tr>
</table>
</body>
</html>
Add this to your head tag:
<meta http-equiv="refresh" content="5;URL=http://example.com/somepage.html">
The "5" is your 5 second delay, and the URL is whatever page you want to redirect to.
And by the way, as a beginning developer, Google is your friend.
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.
I am playing a sound by the click on a link, I know not beautiful but it works.
Well ran into a new problem today sound did not play the first time I clicked the link... But back to the question at hand.
The HTML page playing the sound the redirects the browser back to the page I intend it to after playing the sound, but then the fun begins.
Something goes afoul with the links inside the original page's HTML code, the browser for some reason "superimposes" additional information.
Where the original HTML refers to
/webapp/play_a_sound.html
The page once it is reloaded by the redirect in HTML page 2 suddenly refers to
//webapp/webapp/play_a_sound.html
Did you notice the //webapp/webapp/ difference ?
I have tried to use to no avail, any takes on how to avoid the link degregation ?
andytest1.html
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>andytest1.html</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head><body>
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top;">TOPMENU<br>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<table style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>ÅÅÅÅÅÅ
</a><td style="vertical-align: top;"> Play Sound<br>
</a>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="vertical-align: top;">BOTTOMMENU<br>
</td>
</tr>
</tbody>
</table>
<br>
<br>
<br>
</body>
</html>
PLAY_A_SOUND.HTML
<!DOCTYPE HTML>
<html>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>play_a_sound.html</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="refresh" CONTENT="3;URL=..//webapp/andytest1.html/">
<body>
<EMBED src="..//webapp/sound/anysound.wav"" autostart=true loop=false volume=100 hidden=true>
</body>
</html>
This particular problem has been noted using Ubuntu 10.04 LTS and Firefox 3.6.11
You have a trailing slash where there shouldn't be one.
Replace
..//webapp/andytest1.html/
by
../webapp/andytest1.html
I assume the trailing slash is making the browser treat the HTML page like a directory, so the browser will parse any relative URLs relative to /webapp/andytest1.html/ instead of /webapp/.