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
Related
:
So I need to build this kind of a site without using anything but HTML (no CSS). And I'm having issues aligning the upper text (I can only use align="right" but it puts it and the end of the site), and I can't seem to make that table. Here's my code so far:
<html>
<p size="12px" align="right"><b>Janez Novak</b></p>
<table border="1" style="width:20%">
<tr>
<td align="left" width=><p align="center" rowspan="5"><b>test</b></p><br/></td>
<td>um feri</td>
<tr>
<td align="left" width=><p align="left"><b>Telefon</b></p></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left" width=><p align="left"><b>Telefaks</b></p></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
</html>
Does this solve your problem:
<html><body>
<table width="600" align="Center">
<tr><td align="center">
<h1>Janez Novak</h1>
<i>Univ. dipl. inz. | Univ. dipl. ing.</i>
<h2>Raziskovalec | Researcher</h2>
</td></tr>
<tr><td align="Left">
<table border="1">
<tr>
<td rowspan="3" align="Center" valign="Top"><b>Naslov:</b></td>
<td>UM FERI</td>
</tr>
<tr>
<td>Smetanova Ulica</td>
</tr>
<tr>
<td>2000 Maribor</td>
</tr>
<tr>
<td align="left"><b>Telefon:</b></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left"><b>Telefaks:</b></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
<tr>
<td align="right" colspan="2">www.feri.um.si</td>
</tr>
</table>
</td></tr>
</table>
</body></html>
Now the result looks like this:
Note that you also have to remove style="width:20%" because that's CSS.
rowspan is not a valid attribute of <p> elements. In order to replicate what is shown in your image, use the following code:
<table border="1" style="width: 50%">
<tr>
<td align="left" valign="top" rowspan="3"><b>Address:</b></td>
<td>1 Test Street</td>
</tr>
<tr>
<td>Testington</td>
</tr>
<tr>
<td>Testshire</td>
</tr>
<tr>
<td valign="top"><b>Telefon:</b></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td valign="top"><b>Telefaks:</b></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
jsFiddle Demo
First of all, there's an error in your HTML in your table:
<table border="1" style="width:20%">
<tr>
<td align="left" width=><p align="center" rowspan="5"><b>test</b></p><br/></td>
<td>um feri</td>
</tr> <!-- Added missing tr closing tag -->
<tr>
<td align="left" width=><p align="left"><b>Telefon</b></p></td>
<td>+386 2 220 7000</td>
</tr>
<tr>
<td align="left" width=><p align="left"><b>Telefaks</b></p></td>
<td>+386 2 220 7272, +386 2 220 7090</td>
</tr>
</table>
Second: How is it that you can't use CSS, but are using the style attribute on your table, this is virtually the same as CSS.
Third, a possibility here is to wrap the <table> in a <p> or a <div> and move the entire parent element
My question is that how can I make a row with different columns quantity ?
For example I want to have 2 columns in last row in this picture (the portion of each cell must be 50%).
Another question that I have is that how can I make text starts from first line in a cell (center cell , in this picture) ?
My code is :
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th,
td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left">
<td colspan="3">
home products contact us
</td>
</tr>
<tr>
<td width="25%">last post</td>
<td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
<td>our friends</td>
</tr>
<tr>
<td>our statics</td>
<td>24</td>
</tr>
<tr>
<td>our social pages</td>
<td>about us</td>
</tr>
</table>
There's two primary answer categories to your question.
First, the direct answer. Think of your page as a grid. You want enough squares on the grid to be divisible by both 3 and 2. Say, 6. Then use colspan to set each column to the number of grid columns that would be needed -- so, colspan=2 for 3 columns, and colspan=3 for 2 columns.
<table border=1>
<tr>
<td colspan=6>My Website</td>
</tr>
<tr>
<td colspan=6>home, products, contact us</td>
</tr>
<tr>
<td colspan=2 style="width:33%">last post</td>
<td colspan=2 rowspan=2 style="width:33%">hello my name</td>
<td colspan=2 style="width:33%">our friends</td>
</tr>
<tr>
<td colspan=2 style="width:33%">our statics</td>
<td colspan=2 style="width:33%">24</td>
</tr>
<tr>
<td colspan=3 style="width:50%">our social pages</td>
<td colspan=3 style="width:50%">about us</td>
</tr>
</table>
The other answer category is that you should avoid using tables for your layout structure. There's a LOT of Google results for this one, and it's very opinion based, so I'll just say that generally tables should be used for data, css for layouts, and using tables for layouts may be quicker but it's less flexible.
Try this, its working well, hope it will resolve your issue.
Add this class
.column{display:inline-block; width:49%;}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" >
home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>
</td>
</tr>
</table>
I've added a table inside a table.
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
But I want "TEST" values under col1 and numeric values under col2. Currently all values are shown under col1.
Edit - Actual Code
<tr>
<td colspan="10">
<table class='<%= "table"+count%>' style="display:none" border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<nested:iterate property="equipC" id="equipmentFormBean" indexId="ffIndex" >
<tr class='<%= "table"+count%> dataOff' style="display:none">
<td align="right" ><nested:write property="equipInitial" /> </td>
<td ><nested:write property="equipNum" /> </td>
</tr>
</nested:iterate>
</table>
</td>
</tr>
How to do it?
Use Google chrome...Your html code is right.On my PC I see the values are in COL2.
Use Forgot to use table heading heading tag "th"
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<th>col1 </th>
<th>col2</th>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
Your HTML code is correct. With the html provided by you it displayed the tables properly. You may please see it here # FIDDLE - http://jsfiddle.net/BRxKX/4986/
Problem could be with dynamic generation of tables and mostly around COLSPAN if at all its being used in your dynamic code.
Here is code that I tested (you can see this in - http://jsfiddle.net/BRxKX/4986/)
<html>
<head>
</head>
<body>
<table>
<tr>
<td colspan="10">
<table border="2" cellpadding="1" cellspacing="1">
<tr>
<td>col1 </td>
<td>col2</td>
</tr>
<tr >
<td >TEST </td>
<td >33444</td>
</tr>
<tr >
<td >TEST</td>
<td >9900</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I don't have much experience with html, but I tried to make a simple table and I get extra cells in it, I don't know why.
Here is the code:
<table border="1">
<tr>
<td colspan="5"> hi <td>
<td colspan="3"> hi <td>
</tr>
<tr>
<td colspan="3"> hi <td>
<td colspan="5"> hi <td>
</tr>
</table>
I expect this to have two rows with 2 cells in each, in first row first cell is bigger, and in second row second cell is bigger. But for some reason I get 4 cells in each row, like this:
.
You didn't terminate your <td>.... You need a </td> at the end.
Working Fiddle
http://jsfiddle.net/GFdP6/3/
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Furthermore
If you want it to look like you'd expect, you will have to set some widths on your td's like I did in the fiddle.
You have used TD Start Tags when you want TD End Tags. So you have 4 TD elements in each row instead of 2. (Note that the end tag for TD is optional so this is valid).
It's a typo... The closing TD tags are missing.
<table border="1">
<tr>
<td colspan="5"> hi --> close your tags here --> </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
Missing closing tags for <td>.
<table border="1">
<tr>
<td colspan="5"> hi </td>
<td colspan="3"> hi </td>
</tr>
<tr>
<td colspan="3"> hi </td>
<td colspan="5"> hi </td>
</tr>
</table>
I am new to HTML and CSS designs. I have the below code.
<html>
<body>
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td >wqewqehkjfoiw</td>
<td >abcdefdsfds</td>
<td >sdfdsfdsfdsf</td>
<td >dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The first and second rows have 4 tds of equal width. Now on third row, i wanted to have 3tds with equal width. But it is not working with the above code. Pls help
You should consider using a grid system (like http://960.gs/) instead of tables.
If you still want to use tables, use the colspan attribute:
<html>
<body>
<table width="100%">
<tr>
<td colspan="3" width="25%"> </td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
</tr>
<tr>
<td colspan="4" width="33%">wqewqehkjfoiw</td>
<td colspan="4" width="33%">>abcdefdsfds</td>
<td colspan="4" width="33%">>sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The table above has 12 columns, so for N tds, use colspan="12/N".
<table width="100%" border="5">
<tr>
<td colspan="25%"> </td>
<td colspan="25%"></td>
<td colspan="25%"></td>
<td colspan="25%"></td>
</tr>
<tr>
<td colspan="25%">wqewqehkjfoiw</td>
<td colspan="25%">abcdefdsfds</td>
<td colspan="25%">sdfdsfdsfdsf</td>
<td colspan="25%">dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td colspan="34%">wqewqehkjfoiw</td>
<td colspan="33%">abcdefdsfds</td>
<td colspan="33%">sdfdsfdsfdsf</td>
</tr>
</table>
The way you tried won’t work because it does not correspond to the HTML table model, or any logical table structure. What browsers do in practice is (as you probably noticed) that they treat the row with three cells as if it had a fourth, empty cell. And then they more or less ignore the conflicting width settings.
Among the possible workarounds, the cleanest (and most common) is probably the use of nested tables. You would replace the last row cells by a single cell that spans all the four columns and contains an inner one-row table. The last row could thus be:
<tr>
<td colspan=4>
<table width=100%>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</td>
</tr>