I'm trying to create this shape with tables:
My html code is this:
<html>
<head>
<title>Exercise!</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1" rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>
This html code gets me this wrong shape:
But when I add a row without colspan and rowspans, the browser shows this correct shape but with an extra row:
Here is the code that creates the correct shape but with an extra row:
<html>
<head>
<title>Exercise!</title>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1" rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="1"></td>
<td colspan="2"></td>
<td colspan="1"></td>
</tr>
</table>
</body>
</html>
What is the problem?
EDIT : IE shows a big blank rectangle!!!! Also what is this problem?
problem is likely the borders. When you add the row with all the fields specified, it draws a border between each field for all fields, but without that row, some of the borders are not drawn, so some rows have less pixels than others
Works wonderfully for me in WebKit. Get rid of the borders on each tr for sure. What browser are you using? (Also, I added a rowspan.)
fiddle: http://jsfiddle.net/whqVC/
Related
How do I create this table using HTML table tags?
Something similar to this could be used:
<table border=1 width="100%" height="20%">
<tr><td colspan="2" width="50%"></td><td width="25%"</td><td width="25%" rowspan="3"></td></tr>
<tr><td width="25%" ></td><td colspan="2"></td></tr>
<tr><td colspan="3"></td></tr>
</table>
This is a sketch: when possible I would remove all of those constraints to widths and height.
table{border-collapse:collapse;width:100%}
table,td{border:1px solid #000}
td{height:5em;width:25%}
<table>
<tr>
<td colspan="2"></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>
What do you think should I do to make my code's output like in the photo?
Thank you for answering.
(I am typing any words in here because stackoverflow doesnt let me post this. This is the most detailed thing I can think of. I am new to the programming world and I have no one to assist me that's why I am asking for some help. Thank you for understanding.)
Here's my code:
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0">
</td>
</tr>
</table>
enter image description here
make table inside td
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<table border="1" cellpadding="20% " width="20%" cellspacing="0">
<tr>
<td rowspan="10"></td>
<td colspan="9"></td>
</tr>
<tr>
<td rowspan="9"></td>
<td colspan="8"></td>
</tr>
<tr>
<td rowspan="8"></td>
<td colspan="7"></td>
</tr>
<tr>
<td rowspan="7"></td>
<td colspan="6"></td>
</tr>
<tr>
<td rowspan="6"></td>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="5"></td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="4"></td>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td colspan="1"></td>
</tr>
<tr>
<td rowspan="0" style="padding: 0; border: none;">
<table border="1" cellpadding="10% " width="20%" cellspacing="0">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
In this image two columns are spanned equal to three columns
How can I achieve this in my situation,
<table border="1">
<tr>
<td colspan="3">Top</td>
</tr>
<tr>
<td>Left</td>
<td>Center</td>
<td>Right</td>
</tr>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</table>
<table border="1">
<tr>
<td colspan="6">Top</td>
</tr>
<tr>
<td colspan="2">Left</td>
<td colspan="2">Center</td>
<td colspan="2">Right</td>
</tr>
<tr>
<td colspan="3">Left</td>
<td colspan="3">Right</td>
</tr>
</table>
I'm just a beginner but I have been working with this problem for hours now.
Applying the image in the td will strech the whole table into a weird size and ruin everything. The table is 500 x 500 and 5 columns and rows, 2 columns are needed for that gif. The gif's size is 200 x 200. But why does it stretch that way ?
Before applying gif:
The code before gif is here:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
And after:
<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor="#264663">
<table style="width:500px;height:500px;table-layout:fixed;" bgcolor="#fddab4" align="center" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="1">
<tr>
<td colspan="5"></td>
</tr>
<tr>
<td rowspan="4" colspan="2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
EDIT: I tried removing height="100%" but then this happens:
The 100% height is causing the problem.
<td colspan="2" rowspan="2"><img style="display:block;" width="100%" src="/pics/meanwhileatnintendo.gif" /></td>
As long as your image is square this should work.
Apparently, after hours of trial and error,this works:
Image
`
<head>
</head>
<body bgcolor="#264663">
<table style="table-layout:fixed;width:500px;height:500px;border-collapse:collapse;" bgcolor="#fddab4" border="10" bordercolor="#d12a5b" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" background="/pics/5to1.jpg" height="100" width="100"></td>
</tr>
<tr>
<td rowspan="4" colspan="2" height="400" width="200"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
<td height="100" width="100"></td>
</tr>
<tr>
<td height="100" width="100"></td>
<td height="200" colspan="2" rowspan="2" width="200" style="background-image:url(/pics/meanwhileatnintendo.gif)">
</td>
</tr>
<tr>
<td height="100" width="100"></td>
</table>
</body>
`
But, I want to know that is there a more effective and shorter way to make the cells keep their sizes even when content is being added!
That was my problem: The cells kept changing size even from adding a single letter in them. Now that I have stated the size of each cell individually, the cells won't resize anymore and that's great! But still, alot of typing needed for such a simple problem. Any other way?
See this:
_____ __
|_____| |
| |__|__|
|__|_____|
How to code it in HTML?
<table border="1">
<tr>
<td colspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
Try this :-)
<table>
<tr>
<td colspan=2>top left</td>
<td rowspan=2>top right</td>
</tr>
<tr>
<td rowspan=2>lower left</td>
<td>center</td>
</tr>
<tr>
<td colspan=2>lower right</td>
</tr>
</table>
It produces
use colspan and rowspan, and set height and width.
<table border=1 height=400 width=400>
<tr>
<td colspan=2>1</td>
<td rowspan=2>3</td>
</tr>
<tr>
<td rowspan=2>4</td>
<td>5</td>
</tr>
<tr>
<td colspan=2>8</td>
</tr>
</table>
http://jsfiddle.net/2b9K3/
<table>
<tr>
<td colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
This can be done pretty easily with rowspans and colspans.