Create table with many td - html

I would like to make this table layout:
I have:
<table border="1">
<tr> <td colspan="3">aaa</td> <td colspan="3">aa</td> </tr>
<tr> <td>a</td> <td> aa </td> <td> aaa </td> <td>aa</td><td>aa</td><td>aa</td> </tr>
</table>
but how can I make rest?
LIVE: http://jsfiddle.net/jsTvA/1/


Here it is:
Code: http://jsfiddle.net/jsTvA/14/


You could create a new table in a cell.


The way to approach the problem if you want a single table is:
Work out the maximum number of rows and columns you require. In your case it looks like 8 columns, 6 rows.
Make a simple table grid of this size.
Start setting colspan and rowspan on tds and removing the tds next to them.
Repeat this until you have the format you like.


The best i can:
<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="3">aa</td>
</tr>
<tr>
<td>a</td>
<td> aa </td>
<td> aaa </td>
<td>lol</td>
<td>
<table border="1">
<tr>
<td colspan="3">
lol
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
<tr>
<td>
ok
</td>
<td>
ok
</td>
<td>
ok
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="10">
</td>
</tr>
</table>
http://jsfiddle.net/jsTvA/15/


<table border="1">
<tr>
<td colspan="3">aaa</td>
<td colspan="5">aa</td>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td rowspan="3">aa</td>
<td colspan="3">aa</td>
<td rowspan="3">aa</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>bb</td>
<td>bb</td>
<td>bb</td>
</tr>
<tr>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
<td>aa</td>
</tr>
<tr>
<td colspan="8">aa</td>
</tr>
</table>


To make that structure you'll need to utilise the attribute colspan and rowspan.
Example.
To Make the following structure:
-------
|A |
-------
|X|Y|Z|
-----
| |1|2|
-------
use the code:
<tr>
<td colspan="3">A</td>
</tr>
<tr>
<td rowspan="2">X</td>
<td>Y</td>
<td>Z</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
An alternative is as a previous post suggested, to add a nested table as follows:
<tr>
<td>A</td>
</tr>
<tr>
<table>
<tr>
<td>X</td>
<td>Y</td>
<td>|</td>
</tr>
</table>
</tr>
Personally I'd opt for the colspan route, but its really up to you.
Another route would be to ignore tables entirely and use CSS, but you are likely to find this much more painful unless you are already competenent at using CSS.


You can try merging cells in excel and then convert it into html.
http://tableizer.journalistopia.com

Related

HTML Nested Table Not Nesting

I'm trying to make a nested table and its not working. It only works when I have a nested table following another table:
<table>
</table>
<table>
<tr>
<td>
<table>
<tr>
<td>C#</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>MS SQL Server</td>
<td>⭐⭐⭐</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>HTML</td>
<td>⭐⭐</td>
</tr>
<tr>
<td>JavaScript</td>
<td>⭐⭐</td>
</tr>
</table>
</td>
</tr>
</table>
But if I have just the nested table without the first empty table it doesn't nest:
<table>
<tr>
<td>
<table>
<tr>
<td>C#</td>
<td>⭐⭐⭐⭐</td>
</tr>
<tr>
<td>MS SQL Server</td>
<td>⭐⭐⭐</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>HTML</td>
<td>⭐⭐</td>
</tr>
<tr>
<td>JavaScript</td>
<td>⭐⭐</td>
</tr>
</table>
</td>
</tr>
</table>
Here I end up getting a table with 4 rows each with two columns.

No need to use nested tables when you can use one table:
<table>
<tr>
<td>C#</td>
<td>⭐⭐⭐⭐</td>
<td>HTML</td>
<td>⭐⭐</td>
</tr>
<tr>
<td>MS SQL Server</td>
<td>⭐⭐⭐</td>
<td>Javascript</td>
<td>⭐⭐</td>
</tr>
</table>

How the table span works?

What I would like to do:
What did I wrote:
<table>
<TR>
<TD ROWSPAN="4">left</TD>
<TD ROWSPAN="12">middle</TD>
<TD ROWSPAN="3">right</TD>
</TR>
<TR>
<TD ROWSPAN="4">left2</TD>
<TD ROWSPAN="3">right2</TD>
</TR>
<TR>
<TD ROWSPAN="4">left3</TD>
<TD ROWSPAN="3">right3</TD>
</TR>
<TR>
<TD ROWSPAN="3">right4</TD>
</TR>
</table>
It turns out with this:
I would like the table have same height, I can work in this way, but it is not the same height:
<table>
<TR>
<TD>left</TD>
<TD ROWSPAN="12">middle</TD>
<TD>right</TD>
</TR>
<TR>
<TD>left2</TD>
<TD>right2</TD>
</TR>
<TR>
<TD>left3</TD>
<TD>right3</TD>
</TR>
<TR>
<TD>right4</TD>
</TR>
</table>
and the result like this:

Got it! The trick was having a total of twelve <tr>s, even though some of them are empty.
As a point of curiosity, I solved this by making the table in excel, saving as html, and deleting all of the inline styles that excel puts in there.
td {
border: 1px solid black;
}
<table>
<tr>
<td rowspan=4>left</td>
<td rowspan=12>middle</td>
<td rowspan=3>right</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right2</td>
</tr>
<tr>
<td rowspan=4>left2</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=3>right3</td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=4>left3</td>
</tr>
<tr>
<td rowspan=3>right4</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

table formatting dilemma

i always manage to stuff up tables. i want to make one like the top image but im getting the bottom image with:
<table>
<tr>
<td>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</td>
<td rowspan="3"></td>
</tr>
</table>
can someone please correct my work. i know its lazy but ive already tried like 6 combinations and cant get the right one and its becoming very frustrating. is there some kind of free tool available to format tables to prevent me having this issue in future?

<table border="1">
<tr>
<td width="40"> </td>
<td width="40"> </td>
<td width="80" rowspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<!--<td> </td>-->
</tr>
<tr>
<td> </td>
<td> </td>
<!--<td> </td>-->
</tr>
</table>
Fiddle

You have invalid HTML. You cannot have <tr> as children of <td>.
Try this instead...
<table>
<tr>
<td></td>
<td></td>
<td rowspan="3"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

How is make this html table?

I must create this table, but colspan and rowspan make my brain crazy. Please help.
Jsfiddle blank for experiments, - http://jsfiddle.net/3pbuT/2/

Fairly straight-forward..... Your'e confusion is the number of rows you had. There are only 2 rows in that table.
DEMO HERE

<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

Try this ... if you have dreamweaver tool you can do this very easily....
<table width="200" border="1">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

The easiest way is Dreamweaver, but it doesn't take much to deal with colspan and rowspan, I just did this with very little thinking, and I used jsfiddle just to make sure it was correct.
Enjoy.
<table>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

<table>
<thead>
<tr>
<th rowspan="2">город 1</th>
<th rowspan="2">город 2</th>
<th colspan="4">город 3</th>
<th rowspan="2">город 4</th>
</tr>
<tr>
<th>город 5</th>
<th>город 6</th>
<th>город 7</th>
<th>город 8</th>
</tr>
</thead>
</table>

Something like this:
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td colspan="4"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
http://jsfiddle.net/3pbuT/9/

<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td colspan="4">Im big!</td>
<td rowspan="2">Last</td>
</tr>
<tr>
<td rowspan="2">one</td>
<td rowspan="2">Two</td>
<td>Part 1</td>
<td>Part 2</td>
</tr>
</table>
</body>
</html>

Here you go..
<table border="1">
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="4"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

colspan combines columns, rowspan combines rows. So you look at how many rows are there at maximum and how many columns there at maximum.
In your case you have 7 columns at maximum and 2 rows at maximum:
<table border="1">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
<td>n</td>
</tr>
</table>
Then you combine columns / rows:
<table border="1" style="padding:5px;border-spacing:10px">
<tr>
<td rowspan="2">a (former a)</td>
<td rowspan="2">b (former b)</td>
<td colspan="4">c (former c)</td>
<td rowspan="2">d (former g)</td>
</tr>
<tr>
<td>e</td>
<td>f</td>
<td>g</td>
<td>h</td>
</tr>
</table>

<html>
<head>
<style type='text/css'>
table {
border-spacing:0;
}
td {
border:1px solid grey;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan='2'>1 col, 2 rows</td>
<td rowspan='2'>1 col, 2 rows</td>
<td colspan='4'>4 col, 1 row</td>
<td rowspan='2'>1 col, 2 rows</td>
</tr>
<tr>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
<td>1 col, 1 row</td>
</tr>
</table>
</body>
</html>
EDIT - I'd recommend against WYSIWYG editors, because you won't learn how to do it yourself. Learning will make a few headaches, sure, but then you KNOW. Give a man a fish...

How to code swirl like table in HTML?

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.