The following code should display table with borders around cells, but it doesn’t. Any idea why?
<head>
<meta http-equiv=“content-type” content=“text/html; charset=ISO-8859-1” />
<style type=“text/css”>
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
It works for me if you use the html tag around your text and replace your quotes with actual " or ' (you are using ” which isn't the same. Look closely ” != ")
It shows borders for me in IE6, IE7, IE8, FF3, and Chrome 3, but the borders are around each cell individually.
If you want the borders to appear connected, just add this in your style tag:
table { border-collapse: collapse; }
You're missing an opening <html> tag; is that just an accident from copy/pasting your code here? Also, fix the quotes in the meta and style tags:
<meta http-equiv="content-type"
content="text/html;
charset=ISO-8859-1" />
and
<style
type="text/css">
Adding a proper DOCTYPE is probably a good idea too, although you'll get borders to display from just making the above fixes.
For future reference, running your HTML through the W3C Validator or HTML Tidy can instantly identify issues like this.
Is this the whole document?
If it is, you might want to add a document type and html tags.
your double quotes aren't proper double quotes. try
<!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">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<head>
<style type="text/css">
td, th {border: 1px solid black;}
</style>
<title>Testing Tony’s Travels</title>
</head>
<body>
<table>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td>June 15th</td>
<td>75</td>
<td>1,204 ft</td>
<td>29,686</td>
<td>4/5</td>
</tr>
<tr>
<td>Magic City, ID</td>
<td>June 25th</td>
<td>74</td>
<td>5,312 ft</td>
<td>50</td>
<td>3/5</td>
</tr>
</table>
</body>
</html>
I've only tested it on IE6 (sorry - I'm not on my machine) but I think your text editor has inserted 'smart quotes' around the double-quotes strings instead of the straight ones. It seems like just a stylistic change but it is a different character (“\” instead of "). When I replaced them it rendered the borders.
Related
Can anyone suggest a reason for the table changing position on the first page using this html?
<!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>testfile</title>
<meta http-equiv="expires" content="0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
Table {
page-break-after: always;
}
</style>
</head><body>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 1</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 1</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 2</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 2</b></td></tr>
<tr><td> </td></tr>
</table><br/>
<table width="100%">
<tr><td width="30%"><i>Group:</i></td>
<td width="70%">Test Group 3</td></tr>
<tr><td><i>Title:</i></td>
<td><b>Test Title 3</b></td></tr>
<tr><td> </td></tr>
</body></html>
When you do a print preview in IE9, the table on the first page is in a different position (higher) than any of the tables on the other pages.
Can anyone see a reason for this?
Thanks
This style causes page breaks after each table:
Table {
page-break-after: always;
}
After the first and second table, you have a <br/> tag, which adds a blank line.
Therefore, your second and third tables are being pushed down by the <br/>.
You can correct this by either removing the <br/> tags or by adding a <br/> tag before the first table.
Note that br is a void element, so the "/" symbol isn't needed. You'll usually see it as simply <br>.
Update
You may also need to add this style:
body {
margin: 0px;
}
Otherwise, the margin may be applied on the first page only. This is not true for IE11, but it is true for Chrome and apparently also true for IE9.
I'm trying to create a responsive homepage with max-width of 1024 first. However the images are not displaying when I called from the css file.
I did include the stylesheet inside the home page and the current viewport is 1024.
I can't find my mistake, please help.
Thanks.
homepage
<!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" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>
<body>
<table class="ct">
<tr>
<td class="1">
<?php include 'menu.php'; ?>
</td>
</tr>
<tr>
<td class="2">
</td>
</tr>
<tr>
<td class='3'>
<img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='4'>
</td>
</tr>
<tr>
<td class='5'>
wefhuiweabhfuia</td>
</tr>
</table>
</body>
</html>
stylesheet
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Don't use numbers as css classes. Starting with a number is breaking it for you. A CSS class name should start with an underscore, letter, or -. Class names starting with a dash are reserved for browser extensions. Typically start a class with a letter, though.
The following fiddle works. You can see in the console it tries to load the images, but gets a 404 in this case.
http://jsfiddle.net/nks7S/
HTML
<table class="ct">
<tr>
<td class="a1"> </td>
</tr>
<tr>
<td class="a2"></td>
</tr>
<tr>
<td class='a3'><img src="NewLogo1.png"></td>
</tr>
<tr>
<td class='a4'>
</td>
</tr>
<tr>
<td class='a5'>
wefhuiweabhfuia</td>
</tr>
</table>
CSS
#charset "utf-8";
/* CSS Document */
#media screen and (max-width:1024px)
{
.ct{min-width:1000px;height:898px;border:0;}
.a1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
.a2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
.a4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
.a5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}
Suggestion: Instead of 1, or a1 in my example, try to be a bit more descriptive in your class names. It makes it a lot easier for anyone other than you to follow.
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
<table style="width:150px; word-break:break-all;">
<tr>
<td>'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''</td></tr>
<tr>
<td>'''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''aaaaaaaaaaaaaaaaaaaa</td></tr>
<tr>
<td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td></tr>
</table>
</body>
</html>
but,the display was wrong(all the single quotes display in one line).I used ' instead ,but it did't work.
Try adding this to your CSS: -ms-word-break: break-all;
I often use THEAD, TBODY, and TFOOT elements to divide my data tables into sections that can be addressed separately with CSS. I also understand that there is always an implicit TBODY tag.
What puzzles me is the order that these have to go in to validate. THIS table will validate:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Validation Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Enemies List</th>
</tr>
</thead>
<tfoot>
<tr>
<td>© Bomb Voyage</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Mr. Incredible</td>
<td>Elastigirl</td>
<td>Gazer Beam</td>
</tr>
</tbody>
</table>
</body>
</html>
But this one will not:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Validation Test</title>
</head>
<body>
<table>
<thead>
<tr>
<th scope="col">Enemies List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr. Incredible</td>
<td>Elastigirl</td>
<td>Gazer Beam</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>© Bomb Voyage</td>
</tr>
</tfoot>
</table>
</body>
</html>
The valid one goes HEAD, FOOT, BODY; which does not make any sense.
Putting the foot at the bottom of the table would maintain the analogy between the table and a human body. But for some reason, this order is considered invalid.
Anyone know why?
The spec provides a reason:
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data.
http://www.w3.org/TR/html401/struct/tables.html#h-11.2.3
I don't know if any browsers actually follow this behavior, and it was changed in HTML5 to handle both the HTML 4 order and the more logical order:
In this order: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (but there can only be one tfoot element child in total).
http://www.w3.org/TR/html5/tabular-data.html
Here's a simple web page. I would like the text as well as the image to be vertically centered in the cell. I would like the text to the left of the image, but that shouldn't be a problem...
Could you help?
<!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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="1" style="width: 100%">
<tr>
<td class="style1">Text<img src="PdfLink.jpg" alt="Whatever"/></td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
</body>
</html>
default.css. Add to it as you see fit.
body{
font-size:12pt;
}
}
Update:
I take back some previous comments, including saying that Evan's answer worked.
The following worked. Note the "*". Evan's answer didn't include the . What does the "" mean?
.style1 * {
vertical-align: middle;
}
The asterisk means "any descendent of this class"; be careful using it, though, because it means ALL descendant elements will receive a particular style.
Note 1: Be aware that you have too many right braces in your CSS.
Note 2: Also, the other answer you received won't work if the text is bigger than the image. You didn't give a size for the image.
Because you're using a table for formatting. Simply add .style1 { vertical-align: middle }. The text should remain to the left of the image.