I have a html page which looks like this:
<html>
<head>
<body>
<table>
<thead>
<tr>...</tr>
<tr>...</tr>
</thead>
<tbody>
<tr>...</tr>
<tr>...</tr>
<div>
<tr>...</tr>
<tr>...</tr>
</div>
</tbody>
</table>
</body>
</head>
</html>
Why the tr inside the div arent' showed? and in the page element i see the div outside the table? I thought I could put a div in a table if it was inside a tr..
Why the tr inside the div arent' showed?
It doesn't fit in HTML's model of a table.
Look at thead / tfoot / tbody instead.
and in the page element i see the div outside the table?
The browser is trying to recover from your error
I thought I could put a div in a table if it was inside a tr..
You thought wrong. You can only put a div in a table if it is inside a td or a th.
You need something like this.
<!DOCTYPE html> <!-- Add a DTD -->
<html>
<head>
<!-- Meta tags, styles, javascripts comes here -->
<title>This is the title</title>
<meta charset="UTF-8" />
</head>
<!-- Close head before body -->
<body>
<table>
<thead>
<tr>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><!-- Use td(s) in tr -->
<div></div> <!-- use div inside the td -->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
This question already has answers here:
Why doesn't table > tr > td work when using the child selector?
(2 answers)
Closed 4 years ago.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
table > tr > th {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
</body>
</html>
I just can't see why the text in the cells are not red. Could you show me what i am missing.
Try table tr th instead of table > tr > th because a tbody element is added as a parent element to tr by the browser and since the direct child selector > is used, it won't style the th
table tr th {
color: red;
}
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
What you have are table headers. Firstly, if you want a table cell, use the <td> tag. You do not have to use table > tr > td. If you want to color specific cells, use a class to identify them:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
.cells {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td class="cells">a</td>
<td class="cells">b</td>
</tr>
</table>
</body>
</html>
If not, just use the tag:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
td {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
</body>
</html>
I hope this is what you wanted.
Just starting with Bootstrap and I am trying to make the page-header align to the top of page with no space between the start of header and web page (just like the black StackOverflow header on this page).
The code for the same is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.min.css" ></link>
</head>
<body>
<div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
<h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
</div>
<div class="container-fluid">
<p style="padding:1em 2em 1sem 2em">The table lists the name of people
studying in USICT along with their attendance in each subject.
</p>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Attendance(in %)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Tyagi</td>
<td>rahul.1992.tyagi#gmail.com</td>
<td>70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
However I am getting a space between header and address bar of browser as shown in picture below:
I have tried setting
margin-top:0px;
and
position:absolute;
top:0px;
both don't work.
The h1 has a margin that exceeds the green bar.
Apply the following styles:
<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>
Working JSFiddle.
I Found out the culprit actually it was the h1 which was causing problems.
Since bootstrap applies default margins to h1,h2,h3 ...etc .
So I had to set both the margin of page-header as well as h1 to zero
which solved the problem.
Thank you for the slight hint about h1 from Xufox
Every heading tag such as h1, h2, h3 etc has its own margin thats why you get a white space.Before style your markup you should initializing some style example: tag , , so that you do get twitter bootstrap's own style.This is good practicing of style from markup.
Why don't you put a container-fluid and then a row and your page-header ?
Like this :
<div class="container-fluid">
<div class="row">
<div class="page-header">blabla</div>
</div>
</div>
I would like to export a HTML table to XLS and at the same time retain all formatting.
The following code seems to be working, except that the hilight is lost on export. How do I keep it in place?
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div id='data'>
<table border='1'>
<tr>
<td>
<strong>Greeting</strong>
</td>
<td>
<strong>Message</strong>
</td>
</tr>
<tr>
<td>
Hello
</td>
<td>
World. <mark>I am hilighted!</mark>
</td>
</tr>
</table>
</div>
<script type='text/javascript'>
$(document).ready(function()
{
$("#btnExport").click(function(e)
{
var path = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#data').html());
window.open(path);
e.preventDefault();
});
});
</script>
<input type='button' id='btnExport' value='Export as XLS'>
</body>
To the best of my knowledge, only inline CSS on the table elements will export properly.
So, if you had style="background-color: yellow" on a <td>, the export file would have a yellow cell, but I don't believe spans, marks or inline divs carry their CSS through at 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
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.