How do i make this in html, more specifically the top part of the website?
1) you can use a table for doing your task.
<html>
<head></head>
<body>
<table border=0 width=100% height =100% >
<tr width="1340px" height="200px">
<td colspan=3 align="center"> HEADER OF THE PART WEBSITE........</td>
</tr>
<tr width="1340px" height="500px">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr width="1340px" height="200px">
<td colspan=3 align="center"> FOOTER OF THE PART WEBSITE........</td>
</tr>
</body>
</table>
</html>
2) Such as you can use div class to solve your problem.
Related
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've inherited a web application from about 2005 that has lots of table-styling in it, see https://jsfiddle.net/6t7r1fma
<table style="height:50px">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The issue is that I want the inner table to be as large as I want, but contained in the overflow div which can be scrolled vertically. It works in Chrome but not in Firefox (less important) and IE (more important). What's happening is that the overflow div is taking the height of the child table instead of the parent table, and the result is that the inner table is displayed in its entirety.
Any thoughts? Rewriting the HTML is not really an option, so hopefully there's a CSS solution.
Unfortunately, the way tables work can be summed up by: they size themselves around content. The only solution you have is to pass the max-height from the outer table onto the <div> inside its cell.
If you'd rather do that dynamically, without changing your markup (which would be the right way to go), you could:
hide the contents of your table entirely, using CSS and let the cell get normal size
on page load (after the table was added to DOM and rendered), get the height of the parent <table> and place it as max-height on the <div> contained in your <td>. Of course, this can only be done in javascript.
Besides the above, the only other option you have is placing the max-height on the div inside the td directly (which is what the solutions below do using javascript).
Note I added an id on general principles, to contain it, but as long as you know what you're doing, and this doesn't affect anything else, you don't really need it. Proof of concept:
var divs = document.querySelectorAll('#fix>tbody>tr>td>div');
[].forEach.call(divs, function(div){
div.style.maxHeight = div.parentNode.clientHeight + 'px';
div.style.display = 'block';
})
#fix>tbody>tr>td>div {display: none;}
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If you're already loading jQuery in the project, you should probably use this instead (haven't tested, but it should include IE8, which the above doesn't):
$('#fix>tbody>tr>td>div').each(function(){
$(this).css({
"max-height":$(this).parent().height() + 'px',
display:"block"
});
})
#fix>tbody>tr>td>div {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Note that due to user agent default styles, table elements might be rendered in different browsers with small spacing (cellpadding and cellspacing) (usually 1-2px) and those will be deducted from the available height. You could prevent this behavior by setting both cellpadding and cellspacing to 0 on the parent <table> (like I did) or by resetting user agent default styles for <table> elements.
Can you add a display block to the parent table and it's table body, table rows and table cells? This works in Firefox and IE 11 (not sure how far back you have to go.)
https://jsfiddle.net/fwuzqo3o/
<table style="height:50px; display: block;">
<tbody style="height: 100%; display: block;">
<tr style="height:100%; display: block;">
<td style="height:100%; display: block;">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I'm trying to build a table like this:
Here is my solution:
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"></td>
<td rowspan="3"></td>
<td rowspan="2"></td>
</tr>
<tr><td rowspan="3"></td><td rowspan="2"></td></tr>
<tr><td rowspan="2"></td></tr>
</table>
</body>
</html>
It seems to be logical, but it doesn't work at any browser. Is there any way in HTML to build such table?
You only had 3 rows, so that was never going to work. As you defined your first cell with rowspan="6" then you need at least 6 rows.
You can layout the cells by imagining 6 rows across the diagram and then you can see which row a given cell starts. The following diagram shows the each cell in order of first encounter;
So the following code will produce that layout;
<html>
<head>
</head>
<body>
<table border="1px">
<tr>
<td rowspan="6"> </td> <!-- Box 1 -->
<td rowspan="3"> </td> <!-- Box 2 -->
<td rowspan="2"> </td> <!-- Box 3 -->
</tr>
<tr></tr>
<tr><td rowspan="2"> </td></tr> <!-- Box 4 -->
<tr><td rowspan="3"> </td></tr> <!-- Box 5 -->
<tr><td rowspan="2"> </td></tr> <!-- Box 6 -->
<tr></tr>
</table>
</body>
</html>
The s were so I could see the structure.
Hope this helps.
Try this instead:
<table style="border: 1px solid #999">
<tr>
<td rowspan="4"> </td>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
jsFiddle example
You can stick with 6/3/2 rowspan, but you need to include the empty rows you are spanning. For example:
<table border="1px">
<tr>
<th rowspan="6">6</th>
<td rowspan="3">3</td>
<td rowspan="2">2</td>
</tr>
<tr><!-- empty row --></tr>
<tr><td rowspan="2">2</td></tr>
<tr><td rowspan="3">3</td></tr>
<tr><td rowspan="2">2</td></tr>
<tr><!-- empty row --></tr>
</table>
Fiddle riddle diddle
i want to;
1.remove a small part of this table and make a free space there.i comennted it on the code.
2.also to center the words in the table.
CAN ANY ONE HELP ME PLEASE?(Please use only HTML not css or javascript)
<html>
<head>
<title>My First Webpage</title>
</head>
<body >
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td ></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
</body>
</html>
It's best practice to use CSS for the centering. You could do it like this:
<table style="text-align:center">
But you could also use HTML in each cell like this:
<td align="center">Text</td>
or like this:
<td><center>Text</center></td>
Tables aren't meant to skip cells, so different browsers will handle it differently. You won't get consistent results. Depending on what you need the blank space for, though, there are some workarounds you could use.
If you just want the cell to be empty, put a sticky space inside like this:
<td> </td>
Some browsers are confused by empty tags, but adding a sticky space (which displays as a space- you can't see it) fixes that.
If you want the cell to have no background / border, so it looks like it isn't there:
<td style="background:none; border:none">
That's embedded CSS, and I've included it because the HTML version is deprecated and you're really supposed to use CSS instead, but here's the HTML:
<td bgcolor="#000000" border=0>
You must replace #000000 with the color behind the table. If there's an image or text behind the table, you could use a transparent image as the background instead. (I wouldn't advise going to all that trouble if there's any way you can use style="background:none" instead, though.)
You could make the cell following the one you're removing span the space of both of them:
<td colspan=2>9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
Another solution is to put tables inside a table.
<table border="1px" width="80%" cellspacing="0" cellpading="0" >
<tr>
<td align="right"> <!-- The content is aligned to the right so that the blank space will be on the left. -->
<table width="80%"> <!-- The width of four out of five cells is 80% of the total width -->
<tr>
<td >9-11</td>
<td >11-13</td>
<td >13-15</td>
<td >15-17</td>
</tr>
</table>
</td>
</tr>
<tr>
<td >Monday</td>
<td>6</td>
<td colspan="0">7</td>
<td rowspan ="3">Lunch</td>
<td>a</td>
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">< free</td>
<td>s</td>
</tr>
<tr>
<td >Wedensday</td>
<td>a</td>
<td>s</td>
<td>5</td>
</tr>
</table>
As you can see, there are a ton of different ways to approach the problem. HTML leaves a lot of room for experimentation and creativity.
jF: http://jsfiddle.net/theStudent/b9tGV/1/
I would say you will have to use some CSS, that would be the most professional way to go about doing it.
I have started you off so you can see how that works in above link, it is quite simple and there is lot of tutorials and samples online just do little research.
Sample I started you with is very plain needs more work.
best of luck I believe that is a good start
HTML
My First Webpage
<body >
<table width="80%" cellspacing="0" cellpading="0" >
<tr>
<td class="no-border"></td> <! -- I NEED TO REMOVE THIS PART FROM TABLE AND MAKE A **FREE SPACE** HEARE -->
<td class="border">9-11</td>
<td class="border">11-13</td>
<td class="border">13-15</td>
<td class="border">15-17</td>
</tr>
<tr>
<td class="border">Monday</td>
<td>6</td>
<td colspan="0" class="border">7</td>
<td rowspan ="3" class="border">Lunch</td>
<td class="border">a</td>
</tr>
<tr>
<td class="border">Tuesday</td>
<td class="border" colspan="2">< free</td>
<td class="border">s</td>
</tr>
<tr>
<td class="border">Wedensday</td>
<td class="border">a</td>
<td class="border">s</td>
<td class="border">5</td>
</tr>
</table>
</body>
</html>
CSS
.no-border{
border: none;
}
.border{
border: 1px solid #000;
text-align:center;
}
I have a table in td
<td style="height:100%">
<table>
<table>
<td>
The td is not fixed, it is of variable height, i want to set the table height according to the td.
Please provide your valuable suggetions to achive this.
Here is a static code which works:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td height="100px">
<table border="1" height="100px">
<tr>
<td>1.1</td>
<tr>
<td>1.2</td>
</tr>
</tr>
</table>
</td>
<td>3</td>
</tr>
<tr>
<td height="100px">4</td>
<td>5</td>
</tr>
</table>
</body>
</html>
I am working to make it as dynamic as possible.
Hope this will help you.
Wouldn't just setting the height of the table work as you've done for the td?
<td style="height:100%;">
<table style="height:100%;">
<table>
<td>
The problem is that your nested table don't have inside this:
<tr><td>content</td></tr>
Get an example: FIDDLE