cannot insert background image in table in html - html

this code works:
<html>
<head>
</head>
<body background ="images.png">
<table>
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>
I can see the repeated image. but following doesn't.I see no image.
<html>
<head >
</head>
<body>
<table background ="images.png">
<tr>
<td>100</td>
</tr>
</table>
</body>
</html>


Because background is not a valid attribute for a table tag. Try using CSS.

Related

Insert text in a table cell with d3

How can I add text to a cell using d3?
I have a function with the code that needs to be added and I'm calling this in the body of the html page. I have the following code as an example but it doesn't seem to be working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href ="styles.css">
<script type="text/javascript" src="http://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript">
function t1(){
d3.select("td#target").text("14");
}
</script>
</head>
<body onload="t1()">
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr>
<td>Tom</td>
<td>Smith</td>
<td is="target"> </td>
</tr>
</table>
</body>
</html>
Any ideas on how to make this work.

It is a small mistake..
change <td is="target">into <td id="target">

I found the solution. I figured out I had just a typo
<td is="target"> </td>
Should be
<td id="target"> </td>

html error arise for this program containig table and colspan

Why is the following html code not working for usig colspan in the table?
<html>
<head>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
</table>
</body>
</html>
This is what i get from the code :

What is the expected output? The code has no syntax errors.
Table cells can span across more than one column or row. The attributes COLSPAN ("how many across") and ROWSPAN ("how many down") indicate how many columns or rows a cell should take up.
So, EXAM SCHEDULE as specified with colspan=9 will use 9 columns. There will be total 9 columns as per the code.

There is no major error in your html except some unwanted html, body tags are there which I have removed, but you could be able to see the difference only after adding more columns into it like the below html code:
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<title>table</title>
</head>
<body>
<table height="200" width="200" border="1">
<tr>
<td colspan="9">EXAM SCHEDULE</td>
</tr>
<tr>
<td colspan="3">D</td>
<td colspan="4">T</td>
<td colspan="2">V</td>
</tr>
<tr>
<td>t1</td>
<td>u1</td>
<td>g1</td>
<td>t2</td>
<td>u2</td>
<td>g2</td>
<td>u2</td>
<td>t4</td>
<td>u4</td>
</tr>
</table>
<script>
$(function(){
$(document).on("click",".seat",function(){
alert($(this).parent().find('.green').length);
});
});
</script>
</body>
</html>

Html page break table with border (print)

I need need to use page break inside table rows. But the problem is when i use page break after row(tr), that row(tr) is drawing till end of page when printing. Any ideas to fix this problem.
source:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
</head>
<body>
<table border="1" >
<thead>
<tr><th>heading</th><th>heading 2</th></tr>
</thead>
<tfoot>
<tr><td>footer 1</td><td>footer 2</td></tr>
</tfoot>
<tr>
<td>x</td> <td>x1</td>
</tr>
<tr>
<td>x</td> <td>x2</td>
</tr>
<tr>
<td></td> <td>
<div style="page-break-after: always;"></div>
</td>
</tr>
<tr>
<td>x</td> <td>x3</td>
</tr>
</tbody>
</table>
</body>
</html>
screen shot:
first page,
second page,

the reason is <div style="page-break-after: always;"></div>
always - Always insert a page break after the element
For instance, with avoid value the issue is not observed on the print page.
CSS page-break-after Property

Highlight different items in an HTML table using CSS

Code :
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr>
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
Is there any technique I can use to highlight the items that have changed ( in this case , 2nd row's 1st column) using CSS ? or do I have to resort to other things like JavaScript ?

Use classes like:
<html>
<head>
<style type="text/css">
.highlight{
background: fuchsia;
}
</style>
<title>Hello World</title>
</head>
<body>
<table border=1>
<tr class="highlight">
<td >Old</td>
<td>1</td>
</tr>
<tr>
<td>New</td>
<td>1</td>
</tr>
</table>
</body>
And if something changes you can add the class to the specific element:
$(element).addClass('highlight');
or with plain JavaScript:
element.class = 'highlight';

If you're asking how to highlight the second column of the second row specifically this will work:
table > tr:nth-child(2) > td:nth-child(2) {
background-color:#FFEEEE;
}
If you're asking how to highlight changed rows ANYWHERE, use a class.
Add this to the of your document or the stylesheet.
<style> .highlight { background-color:#FFEEEE; }
Add this to your TD's
class="highlight"

How to print a div as page header in html

How can I write a stylesheet to make a particular div element be repeated at the top of every page of a print out?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
</head>
<body>
<table>
<thead>
<tr><th>heading</th></tr>
</thead>
<tfoot>
<tr><td>notes</td></tr>
</tfoot>
<tr>
<td>x</td>
</tr>
<tr>
<td>x</td>
</tr>
<!-- 500 more rows -->
<tr>
<td>x</td>
</tr>
</tbody>
</table>
</body>
</html>
thank you

"i was wondering if there is any way to print a div in all of printing html pages". As I understand you need to google for master pages. If you want header for multiple pages you should use PHP to deliver it.