I'm trying to create this table header in HTML. But I cant use the properly col-span limits.
Any help?
** I was able to get the solution, looks like its what I was looking for.
This website http://html.com/tables/rowspan-colspan/ helped.
My solution:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-s6z2{text-align:center}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-031e" rowspan="4">A</th>
<th class="tg-031e" rowspan="4">B</th>
<th class="tg-031e" rowspan="4">C</th>
<th class="tg-031e" rowspan="4">D</th>
<th class="tg-baqh" colspan="8">E</th>
</tr>
<tr>
<td class="tg-031e" rowspan="3">F</td>
<td class="tg-s6z2" colspan="7">G</td>
</tr>
<tr>
<td class="tg-s6z2" colspan="6">H</td>
<td class="tg-031e" rowspan="2">I</td>
</tr>
<tr>
<td class="tg-yw4l">J</td>
<td class="tg-yw4l">K</td>
<td class="tg-yw4l">L</td>
<td class="tg-yw4l">M</td>
<td class="tg-yw4l">N</td>
<td class="tg-yw4l">O</td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
This solved my problem.
Thanks all for your help
Related
//Code that I have tried but it doesnt work:
$('#historyOfStatus table td').not(':contains("Revisions Required – CM")').parents("tr").remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="historyOfStatus">
<table>
<tbody>
<tr>
<th>Value</th>
<th>Date Time</th>
<th>By</th>
</tr>
<tr>
<td class="Data1">Draft</td>
<td class="Data1">2022-11-14 13:34:31</td>
<td class="Data1">Muhammad Akhtar</td>
</tr>
<tr>
<td class="Data1">Revisions Required – CM</td>
<td class="Data1">2022-11-14 13:40:18</td>
<td class="Data1">a</td>
</tr>
<tr>
<td class="Data2">Under CFF Contracts Manager Review</td>
<td class="Data2">2022-11-14 13:41:38</td>
<td class="Data2">aa</td>
</tr>
<tr>
<td class="Data1">Under CFF Compliance Review</td>
<td class="Data1">2022-11-14 13:41:43</td>
<td class="Data1">aaaa</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:41:48</td>
<td class="Data2">bb</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:43:10</td>
<td class="Data2">cc</td>
</tr>
</tbody>
</table>
</div>
It can also be done with this one-liner:
$("#historyOfStatus table tr:nth-child(n+2)").filter(function(){return $("td:first",this).text()!="Revisions Required – CM";}).remove()
<div id="historyOfStatus">
<table>
<tbody>
<tr>
<th>Value</th>
<th>Date Time</th>
<th>By</th>
</tr>
<tr>
<td class="Data1">Draft</td>
<td class="Data1">2022-11-14 13:34:31</td>
<td class="Data1">Muhammad Akhtar</td>
</tr>
<tr>
<td class="Data1">Revisions Required – CM</td>
<td class="Data1">2022-11-14 13:40:18</td>
<td class="Data1">a</td>
</tr>
<tr>
<td class="Data2">Under CFF Contracts Manager Review</td>
<td class="Data2">2022-11-14 13:41:38</td>
<td class="Data2">aa</td>
</tr>
<tr>
<td class="Data1">Under CFF Compliance Review</td>
<td class="Data1">2022-11-14 13:41:43</td>
<td class="Data1">aaaa</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:41:48</td>
<td class="Data2">bb</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:43:10</td>
<td class="Data2">cc</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here's a quick end-of-day approach.
Loop over all first cells, checking for the string, and mark its parent row with a temporary class.
Remove all unmarked rows except the first (heading) row.
Remove the temporary classes.
Of course, you could avoid adding classes to the DOM by collecting the elements in an array or whatever. This was quick.
$('#historyOfStatus td:first-child:contains("Revisions Required – CM")')
.closest("tr")
.addClass('keeper');
$('#historyOfStatus tr').not('.keeper').not(':first-child').remove();
$('#historyOfStatus tr').removeClass('keeper');
<div id="historyOfStatus">
<table>
<tbody>
<tr>
<th>Value</th>
<th>Date Time</th>
<th>By</th>
</tr>
<tr>
<td class="Data1">Draft</td>
<td class="Data1">2022-11-14 13:34:31</td>
<td class="Data1">Muhammad Akhtar</td>
</tr>
<tr>
<td class="Data1">Revisions Required – CM</td>
<td class="Data1">2022-11-14 13:40:18</td>
<td class="Data1">a</td>
</tr>
<tr>
<td class="Data2">Under CFF Contracts Manager Review</td>
<td class="Data2">2022-11-14 13:41:38</td>
<td class="Data2">aa</td>
</tr>
<tr>
<td class="Data1">Under CFF Compliance Review</td>
<td class="Data1">2022-11-14 13:41:43</td>
<td class="Data1">aaaa</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:41:48</td>
<td class="Data2">bb</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:43:10</td>
<td class="Data2">cc</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here's an ugly on-liner which preserves the heading row. I like the readability of the one above better. You could simplify by putting your heading row properly in a thead element.
$('#historyOfStatus tr:not(:first-child) td:first-child:not(:contains("Revisions Required – CM"))')
.closest("tr").remove();
<div id="historyOfStatus">
<table>
<tbody>
<tr>
<th>Value</th>
<th>Date Time</th>
<th>By</th>
</tr>
<tr>
<td class="Data1">Draft</td>
<td class="Data1">2022-11-14 13:34:31</td>
<td class="Data1">Muhammad Akhtar</td>
</tr>
<tr>
<td class="Data1">Revisions Required – CM</td>
<td class="Data1">2022-11-14 13:40:18</td>
<td class="Data1">a</td>
</tr>
<tr>
<td class="Data2">Under CFF Contracts Manager Review</td>
<td class="Data2">2022-11-14 13:41:38</td>
<td class="Data2">aa</td>
</tr>
<tr>
<td class="Data1">Under CFF Compliance Review</td>
<td class="Data1">2022-11-14 13:41:43</td>
<td class="Data1">aaaa</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:41:48</td>
<td class="Data2">bb</td>
</tr>
<tr>
<td class="Data2">Revisions Required – CM</td>
<td class="Data2">2022-11-14 13:43:10</td>
<td class="Data2">cc</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I am trying to divide the space covering the XPath and XSL Transformations (as shown in the picture) into two rows whereas the previous columns are divided into three rows. I have used CSS but can not achieve what is desired in this example.
Row and Column spanning in HTML table
Here's what I wrote for everything except the 3/2 spanning
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=3>Tuesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=2>XPath</td>
</tr>
<tr>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
<td style="background-color:#BFB4F8;">5:00 p.m.</td>
<td rowspan=1>XSL Transformations</td>
</tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
I'm able to achieve what was required through some CSS (absolute positioning, margin and padding) but still can't figure out how to do this using only the concepts of HTML. Btw this was a class assignment and our instructor told us that it can be achieved using nested tables. I am still not able to figure it out but thanks to those who helped
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=6>Tuesday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color: #F8F6D1;" rowspan=2>11:00 a.m.</td>
<td rowspan=3 style="position: absolute;padding-top:7px;padding-bottom: 7px;padding-right:148px;">XPath</td>
</tr>
<tr></tr>
<tr>
<td style="background-color: #F8F6D1;" rowspan=2>11:00 a.m.</td>
<td style="background-color: #C7F8D8;" rowspan=2>2:00 p.m.</td>
</tr>
<tr>
<td rowspan=3 style="position: absolute;padding-top: 7px;padding-bottom: 7px;padding-right:50px;margin-top: 10px;">XSL Transformations</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;" rowspan=2>2:00 p.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
</tr>
<tr></tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>
Your 'Tuesday' block gonna be like this:
<tr>
<td rowspan='4'>Tuesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan='2'>XPath</td>
</tr>
<tr>
<td style="background-color: #F8F6D1;" rowspan="2">11:00 a.m.</td>
<td style="background-color: #C7F8D8;" rowspan="2">2:00 p.m.</td>
</tr>
<tr>
<td rowspan='2'>XSL Transformations</td>
</tr>
<tr>
<td style="background-color: #C7F8D8;">2:00 p.m.</td>
<td style="background-color:#BFB4F8;">5:00 p.m.</td>
</tr>
Based on this: https://stackoverflow.com/a/37797024/10291167
It could be done by nested table...
<table border width='300' height='200'>
<tr>
<td width='150'>Data 1</td>
<td rowspan="3">
<table width="150" height='100%'>
<tr>
<td>Nested 1</td>
</tr>
<tr>
<td>Nested 2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
</tr>
</table>
In the end I found this solution. But it turned out to be a weird table.
The "rhythm" of two-to-three can only be realised by internally working with 6 rows. This is what I did below. The cell
<td rowspan=3>XPath<br> <br> </td>
was made to look a little taller by adding a few <br>s.
<table border=1>
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td style="background-color: #F8F6D1;" rowspan=2>8:00 a.m.</td>
<td style="background-color:#BFB4F8;" rowspan=2>5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan=6>Tuesday</td>
<td rowspan=2 style="background-color: #F8F6D1;">8:00 a.m.</td>
<td rowspan=2 style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=3>XPath<br> <br> </td>
</tr>
<tr>
</tr>
<tr>
<td rowspan=2 style="background-color: #F8F6D1;">11:00 a.m.</td>
<td rowspan=2 style="background-color: #C7F8D8;">2:00 p.m.</td>
</tr>
<tr>
<td rowspan=3>XSL Transformations</td></tr>
<tr>
<td rowspan=2 style="background-color: #C7F8D8;">2:00 p.m.</td>
<td rowspan=2 style="background-color:#BFB4F8;">5:00 p.m.</td>
</tr>
<tr>
</tr>
<tr>
<td>Wednesday</td>
<td style="background-color: #F8F6D1;">8:00 a.m.</td>
<td style="background-color: #C7F8D8;">12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
Please refer the table structure needed in the pic above. Can any body guide how this can be achieved
Like this?
.tg {
border-collapse: collapse;
border-spacing: 0;
vertical-align: middle;
}
.tg td {
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg th {
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
.tg .tg-7uzy {
background: #cfc;
}
.tg .tg-yw4l {
background: #ccf;
}
<table class="tg">
<tr>
<th class="tg-yw4l"></th>
<th class="tg-yw4l">Col 1</th>
<th class="tg-yw4l">Col 2</th>
<th class="tg-yw4l">Col 3</th>
<th class="tg-yw4l">Col 4</th>
</tr>
<tr>
<td class="tg-7uzy" rowspan="3">Row 1</td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy" rowspan="3"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l" rowspan="3">Row 2</td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l" rowspan="3"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-7uzy">Row 3</td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
<td class="tg-7uzy"></td>
</tr>
<tr>
<td class="tg-yw4l">Row 4</td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
I need a table like in the picture . I've tried it but I can't do exactly what I want. Here is the code I've wrotten:
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top}
</style>
<table class="tg">
<tr>
<th class="tg-yw4l" rowspan="2"></th>
<th class="tg-yw4l"></th>
<th class="tg-yw4l"></th>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
<tr>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>
You would need to use a nested table to achieve your layout - if you insist on using tables
table {
width: 100%;
border-collapse: collapse;
}
td, th {
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
.tg {
height: 400px;
}
.tg table {
height: 100%;
}
<table class="tg">
<tr>
<th class="tg-yw4l no-pad" rowspan="3">
<table>
<tr>
<td>td</td>
</tr>
<tr>
<td>td</td>
</tr>
</table>
</th>
<th class="tg-yw4l">th</th>
<th class="tg-yw4l">th</th>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
<tr>
<td class="tg-yw4l">td</td>
<td class="tg-yw4l">td</td>
</tr>
</table>
This code does not make the last 2 cells cover the 3 three rows.
How should I fix it?
Here's the code:
<table border="2">
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Schedule</th>
<th rowspan="2">Topic</th>
</tr>
<tr><th>Begin</th><th>End</th></tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 a.m.</td>
<td rowspan="2">5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr><td>Validity:DTD and Relax NG</td></tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 a.m.</td>
<td>11:00 a.m.</td>
<td rowspan="1.5">XPath</td>
</tr>
<tr>
<td>11 a.m.</td>
<td>2:00 p.m.</td>
</tr>
<tr>
<td>2:00 p.m.</td>
<td>5:00 p.m.</td>
<td rowspan="1.5">XSL Transformations</td>
</tr>
</table>
The rowspan doesn't allow 1.5. How can I do it without doubling all the rows and columns?
I've tried this example and here is my version:
<table width="500px" border="1" cellpadding="0" cellspacing="2px" style="text-align: center;">
<tr>
<td rowspan="3">DAY</td>
<td colspan="3">SEMINAR</td>
</tr>
<tr>
<td colspan="2">SHEDULE</td>
<td rowspan="2">TOPIC</td>
</tr>
<tr>
<td>BEGIN</td>
<td>END</td>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 am</td>
<td>Introduction to xml</td>
</tr>
<tr>
<td>Validaty: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan="5">Tuesday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">11:00 am</td>
<td rowspan="3">XPath</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2">11:00 am</td>
<td rowspan="2">2:00 pm</td>
</tr>
<tr>
<td rowspan="2">XSL transformations</td>
</tr>
<tr>
<td>2:00 pm</td>
<td>5:00 pm</td>
</tr>
<tr>
<td>Wensday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td>XSL Formatting Objects</td>
</tr>
Preview here
I know it's way too late now, but this may just help anyone who faces the same issue in the future.
I used a rowspan of "3" and solved the problem using the <hr> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>5.png</title>
<style>
table {
border: 1px solid;
}
th, td {
border: 1px solid;
}
</style>
</head>
<body>
<table>
<caption></caption>
<tr>
<th scope="col" rowspan="3">Day</th>
<th scope="colgroup" colspan="4">Seminar</th>
</tr>
<tr>
<th scope="colgroup" colspan="2">Schedule</th>
<th scope="col" rowspan="2" colspan="2">Topic</th>
</tr>
<tr>
<th scope="col">Begin</th>
<th scope="col">End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 a.m.</td>
<td rowspan="2">5:00 p.m.</td>
<td>Introduction to XML</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 a.m.</td>
<td>11:00 a.m.</td>
<td rowspan="3">
<p>XPath
<hr>
XSL Transformations</p>
</td>
</tr>
<tr>
<td>11:00 a.m.</td>
<td>2:00 p.m.</td>
</tr>
<tr>
<td>2:00 p.m.</td>
<td>5:00 p.m.</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 a.m.</td>
<td>12:00 p.m.</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>
I've tried this example and here is my version:
*,
*::before,
*::after {
box-sizing: border-box;
}
table {
width: auto;
font-size: 30px;
text-align: center;
}
table,
th,
td {
border: 2px solid grey;
}
.inner-table {
width: 100%;
border: none;
}
.inner-table td {
padding: 10px 0;
}
<table>
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Schedule</th>
<th rowspan="2">Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 pm</td>
<td>Inroduction to Xml</td>
</tr>
<tr>
<td>Validity: DTD and Relax NG</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 am</td>
<td>11:00 a.m</td>
<td rowspan="3">
<table class="inner-table">
<tr>
<td>XPatx</td>
</tr>
<tr>
<td>XSl Transformation</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>12:00 am</td>
<td>2:00 pm</td>
</tr>
<tr>
<td>4:00 pm</td>
<td>5:00 am</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 pm</td>
<td>4:00 am</td>
<td>XSL Formatting Objakts</td>
</tr>
</table>
<br>
<br>
<br>
<br>
I came across the same problem. My first thinking is double all the rowspan, 1 to 2, 1.5 to 3, etc...
However, it didn't work, I guess it's because empty tr is not rendered. So I place a empty td inside empty tr, and give it a minimum height.
Here is my working example:
html
<table>
<tr>
<td rowSpan="5">A</td>
<td rowSpan="2">B</td>
<td rowSpan="2">C</td>
<td class="spaceholder"></td>
</tr>
<tr>
<td class="spaceholder"></td>
</tr>
<tr>
<td rowSpan="2">B</td>
<td rowSpan="2">C</td>
<td class="spaceholder"></td>
</tr>
<tr>
<td class="spaceholder"></td>
</tr>
<tr>
<td rowSpan="2">B</td>
<td rowSpan="2">C</td>
<td class="spaceholder"></td>
</tr>
<tr>
<td>A</td>
<td class="spaceholder"></td>
</tr>
</table>
css:
table,
td {
border: 1px solid;
}
.spaceholder {
height: 20px;
border: none;
padding:0px;
}
Codepen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table2homwork</title>
<style>
table,th,td,tr{
border:1px solid black;
border-collapse:collapse;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="3">Day</th>
<th colspan="5">Seminar</th>
</tr>
<tr>
<th colspan="2">Schedule</th>
<th rowspan="2" colspan="3">Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 a.m.</td>
<td rowspan="2">5:00 p.m.</td>
<td colspan="3">Introduction to XML</td>
</tr>
<tr>
<td colspan="3">Validity:DTD and Relax NG</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 a.m.</td>
<td>11:00 a.m.</td>
<td rowspan="3" colspan="3">
<p>
XPath
<hr/>
XSL Transformations
</p>
</td>
</tr>
<tr>
<td>11:00 a.m.</td>
<td>2:00 p.m.</td>
<!-- <td rowspan="1.5" colspan="3">XSL Transformations</td> -->
</tr>
<tr>
<td>2:00 p.m.</td>
<td>5:00 p.m.</td>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 a.m.</td>
<td>12:00 p.m.</td>
<td colspan="3">XSL Formatting Ojects</td>
</tr>
</table>
</body>
</html>