I'm currently learning HTML. I was trying to create a simple HTML document that displays a simple table, but I'm having troubles. My web browser (Mozilla Firefox) is not displaying the borders for the whole table. It looks like if it was a regular paragraph.
Here is what I have
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<html>
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
Try adding a border attribute to the <table> tag, like this:
<table border="1">
Edit: If you have seen tables with borders, but without the border attribute set, it's probably because they were styled with css, which is the preferred way to style everything in html (not by adding individual attributes as above):
<head>
<title>My first web page</title>
<style type="text/css">
table {border: 1px solid black;}
td {border: 1px solid black;}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
...
</body>
As another learning exercise, you should also look into linking to an external style sheet, as an alternative to using a <style> tag in the html as shown here. Here is a decent beginning tutorial: http://www.w3schools.com/css/css_howto.asp
You might want to control border by using something like :
<table style="border:2px solid red;">
You're missing a closing element for second row. Should be:
<head>
<title>My first web page</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<tr/>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
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>
I have a single table in desktop. Client wants its to be shown as 2 tables in mobile view. Is there a way to achieve it without duplication of html or should I take div method instead of table?
Desktop view:
Mobile view:
you can use 2 table together like this
pic
code
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.tb_1{
float:left;
width:50%;
}
.tb_2{
float:Right;
width:50%;
}
#media only screen and (max-width: 619px) {
.tb_1{width:100%;}
.tb_2{width:100%;}
}
</style>
</head>
<body>
<table class="tb_1" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
<table class="tb_2" border="1">
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr
</table>
</body>
</html>
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>
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!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" />
<style type="text/css">
table{
width:600px;
table-layout:fixed;
}
table td{
border:1px solid red;
text-align:center;
background-color:#9CF;
}
table td:only-child{
background-color:#CCFFFF;
}
caption{
color:blue;
font-size:80%;
}
</style>
<title></title>
</head>
<body>
<table>
<caption>Original table</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>After some columns are removed</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>4</td>
<td>5</td>
<td>7</td>
<td>8</td>
<tr>
</table>
<table>
<caption>I want these to have the same width</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Two</td>
<td>Three</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
<table>
<caption>I want these to have the same width, too</caption>
<tr>
<td colspan="8">Cell with colspan=8</td>
</tr>
<tr>
<td>1</td>
<td>Column number four</td>
<td>5</td>
<tr>
</table>
</body>
</html>
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
Jsfiddle
I want to display 3 button which contains 5 values side by side. I want to enhance the display of the button.
Example:
1 aombhkjsdhffhf hehehe 4 5
2 khdjhfhf dhjfhj 6 7
3 hhkjhdjkhdjh jhkjhjkh 8 9
So, each line above needs to be on a button. So I have 3 buttons, but the display on the buttons needs to be as if I am displaying a table.
Do you have any suggestions?
You can put a table inside of the <button> tag.
<button>
<table>
<tr>
<td>1</td>
<td>aombhkjsdhffhf</td>
<td>hehehe</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</button>
<br>
<button>
<table>
<tr>
<td>2</td>
<td>khdjhfhff</td>
<td>dhjfhj</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</button>
<br>
<button>
<table>
<tr>
<td>3</td>
<td>hhkjhdjkhdjk</td>
<td>jhkjhkjh</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</button>
and define the css so that the td element has a certain width:
td{width:100px;}
See sample on JSFiddle.
This sounds like something you could easily handle with css and javascript. In other words, render a normal html table, use CSS to make each row look like a button, and use javascript to tie an event handler to each row's click.
Html
<table>
<tr class="button">
<td>aombhkjsdhffhf</td>
<td>hehehe</td>
<td>4</td>
<td>5</td>
</tr>
<tr class="button">
<td>khdjhfhf</td>
<td>jhkjhjkh</td>
<td>6</td>
<td>7</td>
</tr>
<tr class="button">
<td>hhkjhdjkhdjh</td>
<td>dhjfhj</td>
<td>8</td>
<td>9</td>
</tr>
</table>
Css
tr.button {
/* the css to make each row look like a button */
}
Javascript
// using jQuery
$('tr.button').click(function() {
// do whatever here.
});