I can't figure out how to create the below table in HTML. It's very basic, I know, but I'm stuck at the header.
The year needs to span over all the months. I can't seem to figure out how to do this.
Add colspan="12" to the year cell and rowspan="2" to the Task name cell
Demo
<table>
<tr>
<td rowspan="2">Task name</td>
<td colspan="12">Year</td>
</tr>
<tr>
<td>Task name</td>
<td>January</td>
<td>February</td>
<td>...</td>
<td>December</td>
</tr>
<tr>
<td>Task name</td>
<td colspan="12">Rest of cells...</td>
</tr>
</table>
Related
I have a really simple example that is driving me crazy. Can someone explain why is this working
<table>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
</table>
While this isn't?
<table>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
<td rowspan="2">$100</td>
</tr>
</table>
Perhaps the easiest way to understand what's happening here is to add a third row.
Firstly, we can have a table where the $100 spans January and February, but not March:
<table>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
Then, we can have one that spans February and March, but not January:
<table>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>March</td>
</tr>
</table>
As you can see, the value always spans down the table, not up it; similarly, a colspan spans right, not left. In your second example in the question, there is no row below February for the value to span down to, so the attribute has no effect.
In other words: is this violating any spec? Or is there any reason to avoid that?
<table>
<tr>
<td> c11 </td>
<td> c12 </td>
</tr>
<tr>
<td> c21 </td>
</tr>
</table>
(I know that there is colspan attribute, this is not what I am asking)
According to the w3c specs for HTML tables, under Calculating the number of columns in a table:
The number of columns is equal to the number of columns required by the row with the most columns, including cells that span multiple columns. For any row that has fewer than this number of columns, the end of that row should be padded with empty cells.
So no, each row does not need to have the same number of columns. The browser should handle it, as it follows the standard.
<table border=1>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
No it is not, you can use the colspan attribute as in
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>
I want to center a <td> element in a row, when other row has many <td> elements. But the first row's <td> element always sits in the first column position, and it's not moving to center.
Here is my code sample:
<table border="1">
<tr>
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
and here is the result, I want the one element to get in center without having other element, and it should take same width and height of first column elements. Images is here -
If I am interpreting your question correctly, you don't want the <td> element to span the entire row. Instead you want it to be positioned in the "center" column.
If you know the dimensions in advance, you can simply create empty <td>s before it and hide them.
table { empty-cells: hide; }
<table border="1">
<tr>
<td></td> <!-- Empty TD for positioning -->
<td>Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
It seems you want a caption instead of a cell:
td {
border: 1px solid;
}
<table>
<caption>Problem</caption>
<tr>
<td>65</td>
<td rowspan="3" style="width: 100px">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
</tr>
</table>
<table border="1">
<tr>
<td style="border:5px"></td>
<td>56</td>
<td style="border:5px"></td>
</tr>
<tr>
<td>65</td>
<td>66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>66</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>66</td>
<td>87</td>
</tr>
</table>
if you want column then you can remove that style part
and this is the result:
<table border="1">
<tr align="center">
<td colspan="3" align="center">Problem</td>
</tr>
<tr>
<td>65</td>
<td rowspan="3" width="100px" align="center">66</td>
<td>67</td>
</tr>
<tr>
<td>75</td>
<td>77</td>
</tr>
<tr>
<td>85</td>
<td>87</td>
</tr>
<tr>
<td>85</td>
<td align="center">86</td>
<td>87</td>
</tr>
</table>
The amount of columns in a table are defined by the maximum amount of columns in any given row of a table. Since your table uses 3 columns, the row with only a single td cell will not fit across.
To fix this, the colspan attribute is what you want.
However, since you want to keep the cell at the size of others in the same column, you'll use empty td elements to do this. Example below:
table,
td {
border: 1px solid black;
}
<table>
<tr>
<td></td>
<td>1 column</td>
<td></td>
</tr>
<tr>
<td>1 column</td>
<td>1 column</td>
<td>1 column</td>
</tr>
</table>
I've made a html table and when I finished I noticed I made a mistake by having one row with 5 columns while all the others have 3. Is it possible to fix it by making 2 columns only half a column wide or auto adjust it using only html? I do not want to use colspan because its a pretty large table.
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Nested table
If you absolutely don't want to use colspan, you could try nesting a table:
<table border="1">
<tr>
<td>something</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> something </td>
</tr>
</table>
Defining colspan might solve your problem.
colspan must be specified based on the row with largest column.
It is actually used to extend 2 or more columns as per your wish.
It also hugely depends on underlying columns.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>these should be<td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
This must solve your issue.
EDIT: Since you need to span it without the use of colspan, you can use nested table.
<table border="1">
<tr>
<td colspan="2">Something</td>
</tr>
<tr>
<td>
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>this should be</td>
<td>as long as the others</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">Something</td>
</tr>
</table>
The above method goes little bit tricky. For this example it is easy to implement using above snippet. But for your exact solution, since you need to use it for rows with 5 columns.
MERGE 5 columns into 1 and span it to 3 columns:(as implemented below)
<tr>
<td colspan="3">
<table border="0"> <!-- if you want border set it to 1 -->
<tr>
<td>col 1</td>
<td>col 2</td>
<td>col 3</td>
<td>col 4</td>
<td>col 5</td>
</tr>
</table>
</td>
</tr>
<table border="1">
<tr>
<td colspan="2">something</td>
</tr>
<tr>
<td>these should be</td>
<td>as long as the others</td>
</tr>
<tr>
<td colspan="2"> something </td>
</tr>
</table>
please see colspan definition here : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
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