I am building a website and this is my HTML code of my index.html page.
<html>
<table>
<tr>
<td>Watch on</td>
<td>Youtube</td>
</tr>
<tr>
<td>Channel</td>
<td>jonathanlootens</td>
</tr>
<tr>
<td>video title</td>
<dt>Mickey en de stomende drol</td>
</tr>
<tr>
<td>link</td>
<td>https://www.youtube.com/watch?v=a3leCIk2eyQ</td>
</tr>
</table>
</html>
See the snippet code.
When I open the index.html page in my web browser application, I only see a white page, nothing at all. When I open the internet explorer with devtools I don't see any error.
Wrap your content inside of
<body></body>
tags and see if that helps.
<html>
<body>
<table>
<tr>
<td>Watch on</td>
<td>Youtube</td>
</tr>
<tr>
<td>Channel</td>
<td>jonathanlootens</td>
</tr>
<tr>
<td>video title</td>
<td>Mickey en de stomende drol</td>
</tr>
<tr>
<td>link</td>
<td>https://www.youtube.com/watch?v=a3leCIk2eyQ</td>
</tr>
</table>
</body>
</html>
I think this is a good link for you to get started HTML Table CSS Tricks.
Anyway, there's a lot wrong with your code sample.
There's no <!DOCTYPE>
You don't have a <body>
You don't have table headers <thead> nor <th>
You don't have a table body <tbody>
You don't need to add any code, there is syntax mistake
<dt>Mickey en de stomende drol</td>
The </td> doesn't have a valid <td>
You have misspelt tag name
There are many mistakes, however the absence of the tags are whats stopping your content from displaying.
Try:
<html>
<body>
<table>
<tr>
<td>Watch on</td>
<td>Youtube</td>
</tr>
<tr>
<td>Channel</td>
<td>jonathanlootens</td>
</tr>
<tr>
<td>video title</td>
<td>Mickey en de stomende drol</td>
</tr>
<tr>
<td>link</td>
<td>https://www.youtube.com/watch?v=a3leCIk2eyQ</td>
</tr>
</table>
</body>
I would recommend looking at Code Academy (http://www.codecademy.com/) in order to develop your skills.It's a great free site that provides tutorials and teaches the basics of web development.
Related
I have attached this photo to show you what the question is asking with correct formatting.
Click here to see my output with the code used below.
<h1>7.
<table>
<tr>
<th colspan="3">1</th>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</h1>
I used the rowspan and colspan as instructed, and yet my table is still missing the larger spaces as the example shows is needed, so I am looking for guidance on what I am missing. The numbers are aligned correctly, just missing the spaces. I know the code should seem fine, but the program checker is saying it's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
table.td {
bold: normal;
}
</style>
</head>
<body>
<h1>7</h1>
<table style="text-align:center;">
<tr >
<th colspan="3"><h1>1</h1></th>
</tr>
<tr>
<td rowspan="2"><h1>2</h1></td>
<td><h1>3</h1></td>
<td><h1>4</h1></td>
</tr>
<tr>
<td><h1>5</h1></td>
<td><h1>6</h1></td>
</tr>
</table>
</body>
</html>
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
I'm trying to open a .xls file which will has all html content.
In the html content, I'm trying to include 2 tables of width 100% (viewport width of the spreadsheet).
If I just include only the 1st table, WIDTH=100% works. But when I include the 2nd table, both the tables width seems to be auto and not as wide as it works with just 1 table.
Following is the contents of the .xls file :
<HTML>
<HEAD>
<META HTTP-EQUIV="CONTENT-TYPE" CONTENT="application/vnd.ms-excel; charset=UTF-8">
<TITLE>Open in Excel as well as browser (this is ignored by Excel)</TITLE>
</HEAD>
<BODY>
<H2>Useful HTML tags understood by Excel</H2>
<BLOCKQUOTE>The list given below is not an exhastive list of all tags understood by Excel.
Where there are several codes that achieve the same effect, I
have only included one of them.</BLOCKQUOTE>
<TABLE BORDER=YES WIDTH=100%>
<TR>
<TH WIDTH=20%><B>Tag</B></TD>
<TH WIDTH=30%><B>Valid Attributes</B></TD>
<TH WIDTH=50%><B>Excel interpretation</B></TD>
</TR>
<TR>
<TD>TD</TD>
<TD>BGCOLOR=colour</TD>
<TD BGCOLOR=YELLOW>Background colour for the cell</TD>
</TR>
<TR>
<TD>B</TD>
<TD ALIGN=CENTER>-</TD>
<TD><B>Bold</B></TD>
</TR>
<TR>
<TD>TD, TH</TD>
<TD>ROWFIELD</TD>
<TD>Pivot table: Type of pivot table</TD>
</TR>
</TABLE>
<BR/><BR/><BR/>
<TABLE BORDER=YES WIDTH=100%>
<TR>
<TH WIDTH=20%><B>Tag</B></TD>
<TH WIDTH=30%><B>Valid Attributes</B></TD>
<TH WIDTH=50%><B>Excel interpretation</B></TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>ALIGN=LEFT|RIGHT|CENTER|JUSTIFY</TD>
<TD>Table and its placement</TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>WIDTH=nn</TD>
<TD>Size of entire table</TD>
</TR>
<TR>
<TD>TABLE</TD>
<TD>CROSSTABGRAND=NONE|ROW|COLUMN|ROWCOLUMN</TD>
<TD>Pivot table: where grand totals to be placed</TD>
</TR>
<TR>
<TD>TD, TH</TD>
<TD>ROWFIELD</TD>
<TD>Pivot table: Type of pivot table</TD>
</TR>
</TABLE>
</BODY>
</HTML>
To be clear, my requirement is I need to render 2 html tables, both of width 100%.
Please comment if you have any queries.
Put them them into a main table.
<TABLE WIDTH=100%><TR><TD>
<TABLE.......
</TD></TR>
<TR><TD>
<TABLE......
</TD></TR></TABLE>
I'm trying to help my son with a HTML project. This is to be only HTML, not CSS. He has to build a table with his school class schedule. I can't seem to get the columns to line up.
<!DOCTYPE html>
<html>
<body>
<center> Howie </center>
<p><table border="0"
cellpadding=0>
</tr>
<tr>
<th>Period</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td> </tr>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</table></p>
Any suggestions? Any help would be appreciated.
Thanks,
Al
Im sorry... But please look at the code first.
You are beginning with a </tr> That means you want to close a <tr>
And at the end you dont close the <tr>
Second point, why a table inside of a <p> ?
I think if you fix those minor faults.. it will be fine.
Succes with helping your son
Your HTML is malformed. Among other issues:
There is a stray closing </tr> tag just inside <table> tag which needs to be removed.
After the <td></td> containing "Rogers" is an extra </tr> which needs to be removed.
You are missing a </tr> at the end of the table before the </table> tag.
Your HTML is missing the closing </body> and </html> tags.
You should use an HTML validator, such as this one. This will help you discover these types of issues in the future.
They seem messed up because default h alignment for <th> is center and for <td> is left. If you switch th with td you should be fine.
I also agree with the other answers that you have some html issues. I recommend you write html using a specialized editor.
your open and close tags were somewhat messy.
plus I added some html alignment for the head row.
Next time use a text highlighting editor, it makes life a whole lot easier to find the issues:
jsFiddle Example
<p><table border="0" cellpadding="6" cellspacing="0">
<tr>
<th align="left">Period</th>
<th align="left">Class</th>
<th align="left">Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</tr>
</table></p>
I have to create a simple table within a table. i am using following html code for making as simple page. please copy and paste it to file for understand the problem correctly.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td>
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
The main problem is in my right side part of table I have some searched information, and left side some refine search panel. so when my page comes, my refine search window comes exact middle. i want my left part of table is to aligned on table, where my start.
Please help me to resolve this.
valign="top" in the correct column would be a simple solution to your prob.
like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<table border=1>
<tr>
<td valign="top">
<table>
<tr>
<td>thid entry should be on top</td>
</tr>
<tr>
<td>why this comes in middle</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>entry1</td>
</tr>
<tr>
<td>entry2</td>
</tr>
<tr>
<td>entry3</td>
</tr>
<tr>
<td>entry4</td>
</tr>
<tr>
<td>entry5</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY>
</HTML>
edit:
style="vertical-align:top;" if you use css