Can you create a web page table structure given below: - html

Click here to view structure
Each table cell is identified with a letter and all dimensions are in pixels.
The letters and dimensions shown in the table must NOT appear on your
final web page.
The external table border must have a width of 4 pixels and all internal
grid lines on the table must have a width of 2 pixels. Table borders and
grid lines must be visible.
<!DOCTYPE html>
<html>
<head>
<title> Nested Table </title>
</head>
<body>
<table border="4px" align="center" width=100%>
<tr>
<td height="300px" width="400px"> A 400 X 300 </td>
<td height="300px" width="400px"> B 400 X 300 </td>
<td height="300px" width="400px"> C 400 X 300 </td>
</tr>
<tr>
<td colspan=3 height="250px" width="1200px"> D 1200 X 250 </td>
</tr>
<tr>
<td colspan=3 height="150px" width="1200px"> E 1200 X 150 </td>
</tr>
<tr>
<table border="4" align="center">
<tr>
<td height="300px" width="50%"> F 600 X 300 </td>
<td height="300px" width="600px"> G 600 X 300 </td>
</tr>
</tr>
</table>
</html>


tr:first-child td{
height:100px;
width:100px;
}
tr:nth-child(2) td{
height:60px;
}
tr:nth-child(3) td{
height:40px;
}
tr:nth-child(4) td{
height:100px;
width:50%;
}
<table border="1">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan = "3">
</td>
</tr>
<tr>
<td colspan = "3">
</td>
</tr>
<tr>
<td colspan = "2">
</td>
<td>
</td>
</tr>
</table>

Related

How to make this table using only HTML (tr, td, rowspan tags), (NO CSS)

I am using this code but it doesn't seem to work. Help. It just doesnt seem to work however hard I try.
<html>
<head>
</head>
<body>
<table height="100%" width="70%" border="3">
<tr>
<td rowspan="1"> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td rowspan="2"> D </td>
</tr>
<tr>
<td> E </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
</body>
</html>
The above HTML renders as this:
...but I want it to look like this:

It helps if you visualize the raw table rows in a diagram. I've indicated those in pink:
Then we can see that:
A - no rowspan, no colspan.
B - rowspan="2", no colspan.
C - rowspan="3", no colspan.
D - rowspan="2", no colspan.
E - no rowspan, no colspan.
F - no rowspan, no colspan.
G - no rowspan, no colspan.
H - no rowspan, no colspan.
Let's start with a normal table without any rowspans (using * to denote cells that will be merged):
I've added a CSS rule to set height: 50px on all <td> elements for the sake of illustration. It doesn't affect the table's actual layout.
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
</tr>
<tr>
<td> D </td>
<td> B* </td>
<td> C* </td>
</tr>
<tr>
<td> D* </td>
<td> E </td>
<td> C* </td>
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the first row:
tr > td {
height: 50px; /* min-height on <td> doesn't work */
}
<table height="100%" width="70%" border="3">
<tr>
<td> A </td>
<td rowspan="2"> B </td>
<td rowspan="3"> C </td>
</tr>
<tr>
<td> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<td> D* </td>
<td> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Then let's add rowspans to the second row:
I've set different height values for each of the cells (in accordance to their rowspan), otherwise the middle row collapses (as there's nothing to prop it up).
tr > td {
}
tr > td.a {
height: 25px;
}
tr > td.b {
height: 50px;
}
tr > td.c {
height: 75px;
}
tr > td.d {
}
tr > td.e {
}
<table height="100%" width="70%" border="3">
<tr>
<td class="a"> A </td>
<td class="b" rowspan="2"> B </td>
<td class="c" rowspan="3"> C </td>
</tr>
<tr>
<td class="d" rowspan="2"> D </td>
<!-- <td> B* </td> -->
<!-- <td> C* </td> -->
</tr>
<tr>
<!-- <td> D* </td> -->
<td class="e"> E </td>
<!-- <td> C* </td> -->
</tr>
<tr>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Ta-dah:

Rowspan not working as expected

I am trying to create a table layout as shown in below image:
Below is my Html code:
<html>
<head>
<meta charset="UTF-8" />
<title>Table sketch</title>
<style>
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
</tr>
<tr>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>
But it generates below layout:
When I change rowspan value from 2 to 3 for second row. It gives me right layout.
<tr>
<td rowspan="3"> 2 </td>
<td rowspan="3"> 3 </td>
</tr>
Here is a link to jsbin.
But why is first html code not working?
Any help is much appreciated.
Thanks.

You have one tr tag too much: The second row has to contain 3 elements (i.e. no separate tr for the third element in that row):
table {
table-layout: fixed;
width: 20em;
}
td {
width: 4em;
height: 1.5em;
text-align: center;
}
<body>
<table border="1">
<tr>
<td colspan="4"> 1 </td>
</tr>
<tr>
<td rowspan="2"> 2 </td>
<td rowspan="2"> 3 </td>
<td colspan="2"> 4 </td>
</tr>
<tr>
<td> 5 </td><td> 6 </td>
</tr>
<tr>
<td colspan="4"> 7 </td>
</tr>
</table>
</body>

fixed thead doesnt match tbody

I got my code sample saved on https://jsfiddle.net/n7ynjs1t/
All what I need is a simple normal table even with thead fixed on scroll.
CSS:
table {
width: 100%;
}
thead {
width: 100%;
display: table;
}
tbody {
overflow: auto;
height: 200px;
display: block;
}
td {
width: 100px;
}
HTML:
<thead>
<td width=100 align='center'> id </td>
<td width=100 align='center'> head1 </td>
<td width=100 align='center'> head2 </td>
<td width=100 align='center'> head3 </td>
<td width=100 align='center'> head4 </td>
<td width=100 align='center'> head5 </td>
<td width=100 align='center'> head6 </td>
<td width=100 align='center'> head7 </td>
<td width=100 align='center'> head8 </td>
<td width=100 align='center'> head9 </td>
<td width=100 align='center'> head10</td>
<td width=100 align='center'> head11</td>
</thead>
<tr>
<td width=100 align='center'> id </td>
<td width=100 align='center'> 1 </td>
<td width=100 align='center'> 2 </td>
<td width=100 align='center'> 3 </td>
<td width=100 align='center'> 4 </td>
<td width=100 align='center'> 5 </td>
<td width=100 align='center'> 6 </td>
<td width=100 align='center'> 7 </td>
<td width=100 align='center'> 8 </td>
<td width=100 align='center'> 9 </td>
<td width=100 align='center'> 0 </td>
<td width=100 align='center'> 11</td>
</tr>
// The same table rows repeats many times
</tbody>
</table>

I think the closest you will get is this.
You will not be able to "auto size" the headers with the table cells and vice versa, so those widths should be "hard coded".
Also, to make the headers "fit" and make up for the body's scrollbar, add padding. in the below code I added a padding of "15px" for the "thead", who does not have a scrollbar.
EDIT:
Here's a fiddle: https://jsfiddle.net/FredM7/25abq8gf/
See this full HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
table {
width: 200px;
background: green;
}
table tbody, table thead
{
display: block;
}
table thead
{
padding-right: 15px;
}
table tbody
{
overflow: auto;
height: 100px;
}
thead th, tbody td {
width: 72px;
text-align: left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>
Head 1
</th>
<th>
Head 2
</th>
<th>
Head 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>

Issues with drawing a table using rowspan and colspan using HTML

I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.

I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>

Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>

use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>

your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>

Html table, rowspan issue

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