I am trying to make a table like in the sample but i am having a hard time to make it look like in the sample.I can not place the "Introducing to XML","Validity:DTD and Relax NG" and the rest. i need help to place them on top of each other.
<body>
<div>
<table border="1px solid">
<thead>
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Shcedule</th>
<th rowspan="2">Topic</th>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>8:00 am</td>
<td>5:00 pm</td>
<td rowspan="2">Introduction to XML</td>
</tr>
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 am</td>
<td>11:00 am</td>
<tr>
<td>11:00 am</td>
<td>2:00 pm</td>
</tr>
<tr>
<td>2:00 pm</td>
<td>5:00 pm</td>
<td>XSL Transformations</td>
</tr>
</tr>
</tbody>
<tfoot>
<tr>
<td>Wednesday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td>XLS Formating Objects</td>
</tr>
</tfoot>
</table>
</div>
</body>
A few of your <tr>s were nested inside eachother, after correcting that (which I've done for you below), you can accomplish the half columns by multiplying every single cell by 2 and treating the other cells normally. Read this for more info on how to do that.
EDIT: I actually just ended up writing the whole thing to spite someone, here:
table{
border-collapse: collapse;
}
th, td{
border: 1px solid black;
padding: 4px;
}
<table>
<tr>
<th rowspan = "3">
Day
</th>
<th colspan = "3">
Seminar
</th>
</tr>
<tr>
<th colspan="2">
Schedule
</th>
<th colspan = "2" rowspan="2">
Topic
</th>
</tr>
<tr>
<th>
Begin
</th>
<th>
End
</th>
</tr>
<!-- table body code -->
<tr>
<td rowspan="2">
Monday
</td>
<td rowspan="2">
8:00 am
</td>
<td rowspan="2">
5:00 pm
</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">
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= "3">
XSL Transformations
</td>
</tr>
<tr>
<td rowspan= "2">
2:00pm
</td>
<td rowspan= "2">
5:00pm
</td>
</tr>
<tr>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td>XSL Formatting Objects</td>
</tr>
</table>
<!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>Today Task</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Start Table Section -->
<div class="container">
<table>
<thead>
<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>
</thead>
<tbody>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2" class="yellow">8:00 a.m.</td>
<td rowspan="2" class="blue">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 class="yellow">8:00 a.m.</td>
<td class="yellow">11:00 a.m.</td>
<td rowspan="3">
<p>XPath
<hr>
XSL Transformations</p>
</td>
</tr>
<tr>
<td class="yellow">11:00 a.m.</td>
<td class="green">2:00 p.m.</td>
</tr>
<tr>
<td class="green">2:00 p.m.</td>
<td class="blue">5:00 p.m.</td>
<!-- <td rowspan="1">XSL Transformation</td> -->
</tr>
<tr>
<td>Wednesday</td>
<td class="yellow">8:00 a.m.</td>
<td class="green">12:00 p.m.</td>
<td>XSL Formation Objets</td>
</tr>
</tbody>
</table>
</div>
<!-- End Table Section -->
</body>
</html>
Here's what I could do:
<table border="1px solid">
<thead>
<tr>
<th rowspan="3">Day</th>
<th colspan="3">Seminar</th>
</tr>
<tr>
<th colspan="2">Shcedule</th>
<th rowspan="2">Topic</th>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 pm</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 am</td>
<td>11:00 am</td>
<td>XPath</td>
<tr>
<td>11:00 am</td>
<td>2:00 pm</td>
</tr>
<tr>
<td>2:00 pm</td>
<td>5:00 pm</td>
<td>XSL Transformations</td>
</tr>
</tr>
<tr>
<td>Wednesday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td>XLS Formating Objects</td>
</tr>
</tbody>
</table>
Not sure if 1.5 cells are possible (probably want to fix those times anyway because it's vague now).
Related
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>
I'm trying to create a little bit complex table using rowspan, where it looks well enough in this fiddle using this code:
<table border="1" style="margin:5px;">
<tr>
<th><b>Name</b></th>
<th><b>Date</b></th>
<th><b>Time</b></th>
<th><b>No. of Hours</b></th>
</tr>
<tr>
<td rowspan="26">Sample Name</td>
</tr>
<tr>
<td rowspan="6">2016-03-04</td>
</tr>
<tr>
<td>04:59:11 pm</td>
<td rowspan="5">0</td>
</tr>
<tr>
<td>04:59:13 pm</td>
</tr>
<tr>
<td>04:59:15 pm</td>
</tr>
<tr>
<td>04:59:19 pm</td>
</tr>
<tr>
<td>04:59:33 pm</td>
</tr>
<tr>
<td rowspan="3">2016-03-07</td>
</tr>
<tr>
<td>08:23:10 am</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>04:04:01 pm</td>
</tr>
<tr>
<td rowspan="3">2016-03-08</td>
</tr>
<tr>
<td>01:26:56 pm</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>05:00:48 pm</td>
</tr>
<tr>
<td rowspan="6">2016-03-09</td>
</tr>
<tr>
<td>08:21:35 am</td>
<td rowspan="5">0</td>
</tr>
<tr>
<td>08:21:59 am</td>
</tr>
<tr>
<td>09:08:01 am</td>
</tr>
<tr>
<td>09:09:52 am</td>
</tr>
<tr>
<td>02:40:22 pm</td>
</tr>
<tr>
<td rowspan="3">2016-03-10</td>
</tr>
<tr>
<td>09:50:43 am</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>11:44:39 am</td>
</tr>
<tr>
<td rowspan="2">2016-03-11</td>
</tr>
<tr>
<td>11:05:03 am</td>
<td rowspan="1">0</td>
</tr>
</table>
But when I tried to put it in an FPDF generated page, their are empty spaces above each row which you will not notice when displayed in an HTML page. Take a look at the screenshot below:
Now, when I take a closer look at the fiddle, there are empty spaces in it but it's not that noticeable like in the FPDF generated file.
How will I be able to get rid of those empty spaces?
You are doing it wrong actually. You are creating a row for every column and the renderer tries to fill the gaps so that's why you see empty rows. I manage to fix the table, but the logic behind it is pretty weird. You just have to have enough columns in a row to give the renderer to understand which columns you are rowspanning. Anyway, here is the result.
<table border="1" style="margin:5px;">
<tr>
<th><b>Name</b>
</th>
<th><b>Date</b>
</th>
<th><b>Time</b>
</th>
<th><b>No. of Hours</b>
</th>
</tr>
<tr>
<td rowspan="17">Sample Name</td>
<td rowspan="5">2016-03-04</td>
<td>04:59:11 pm</td>
<td rowspan="5">0</td>
</tr>
<tr>
<td>04:59:13 pm</td>
</tr>
<tr>
<td>04:59:15 pm</td>
</tr>
<tr>
<td>04:59:19 pm</td>
</tr>
<tr>
<td>04:59:33 pm</td>
</tr>
<tr>
<td rowspan="2">2016-03-07</td>
<td>08:23:10 am</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>04:04:01 pm</td>
</tr>
<tr>
<td rowspan="2">2016-03-08</td>
<td>01:26:56 pm</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>05:00:48 pm</td>
</tr>
<tr>
<td rowspan="5">2016-03-09</td>
<td>08:21:35 am</td>
<td rowspan="5">0</td>
</tr>
<tr>
<td>08:21:59 am</td>
</tr>
<tr>
<td>09:08:01 am</td>
</tr>
<tr>
<td>09:09:52 am</td>
</tr>
<tr>
<td>02:40:22 pm</td>
</tr>
<tr>
<td rowspan="2">2016-03-10</td>
<td>09:50:43 am</td>
<td rowspan="2">0</td>
</tr>
<tr>
<td>11:44:39 am</td>
</tr>
<tr>
<td rowspan="1">2016-03-11</td>
<td>11:05:03 am</td>
<td rowspan="1">0</td>
</tr>
</table>
I hope it works.
i wanna create something like this in my table
i try with this code, but the result far from what i want
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
</tr>
<tr>
<td>SubItem1a</td>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1a</td>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
or
<table>
<tr>
<td rowspan="3">No</td>
<td rowspan="3">Item1</td>
<td>
<tr>SubItem1a</tr>
<tr>Subitem1b</tr>
<tr>Subitem1c</tr>
</td>
<td>
<tr>AnotherSub1a</tr>
<tr>AnotherSub1b</tr>
<tr>AnotherSub1c</tr>
</td>
</tr>
</table>
how to archive table like image?
Now used to this code rowspan Attribute
<table border="1" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<tr>
<td rowspan="3" align="center">No</td>
<td rowspan="3" align="center">Item1</td>
<td>SubItem1a</td>
<td>SubItem1a</td>
</tr>
<tr>
<td>Subitem1b</td>
<td>Subitem1c</td>
</tr>
<tr>
<td>AnotherSub1b</td>
<td>AnotherSub1c</td>
</tr>
</table>
This will help with your future reference.
I did some example hopefully you understand what is rowspan and colspan.
<h1> Without using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td>10</td>
<td >20</td>
<td >30</td>
<td >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using Rowspan </h1>
<table border="1">
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
<hr>
<h1> using colspan </h1>
<table border="1">
<tr>
<th colspan="5">Hello World</th>
</tr>
<tr>
<th>How</th>
<th>it</th>
<th>Work</th>
<th>Rowspan</th>
<th>First</th>
</tr>
<tr>
<td rowspan="2">10</td>
<td rowspan="2">20</td>
<td rowspan="2">30</td>
<td rowspan="2" >40</td>
<td >50</td>
</tr>
<tr>
<td>60</td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td>90</td>
<td>100</td>
<td>110</td>
</tr>
</table>
DEMO
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>
I got this table in a assignment but I'm have a hard time replicating it:
(source: evc-cit.info)
I can't seem to get the Xpath cell and the XSL transformation cell to share the 11 a.m to 2 p.m cells, can someone help me please?
I came here with same doubt, even though it has been answered but its not a great explanation, so it took me a long time to solve this.You need to put XLS transformations in third row, not in second row. Please see the code below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Table Practice</title>
</head>
<body>
<table border="1" align="center" cellpadding="10px">
<thead>
<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>
</thead>
<tbody>
<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="4">Tuesday</td>
<td>8:00 a.m</td>
<td>11:00 a.m</td>
<td rowspan="2">XPath</td>
</tr>
<tr>
<td rowspan="2">11:00 a.m</td>
<td rowspan="2">2:00 p.m</td>
</tr>
<tr>
<td rowspan="2">XSL transformation</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>XLS Formatting Objects</td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
</head>
<body>
<table border="1px">
<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>Start</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="4">Tuesday</td>
<td>8:00 a.m</td>
<td>5:00 p.m</td>
<td rowspan="2" style="padding: 7px;">XPath</td>
</tr>
<tr>
<td rowspan="2">11:00 a.m</td>
<td rowspan="2">2:00 p.m</td>
</tr>
<tr>
<td rowspan="2">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>XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>
<!-- Hmmm -->
a little hacky but you could say that 11:00 am - 2:00 pm is actually two rows, not one (each cell would then be a rowspan=2). Then Xpath and XSL transformation cells would also be rowspan=2 as there are 4 rows now. (Tuesday would be rowspan=4)
<!DOCTYPE html>
<html>
<body>
<table border="1" spacing="0">
<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 HTML</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:00 a.m.</td>
<td>2:00 p.m.</td>
<td rowspan="1.5">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>XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>
https://code.sololearn.com/WU73qCVhpik8
this is my cord and this table is HTML and CSS combination
this is possible but sum css add to run cord
I came here with same doubt, even though it has been answered but it's not a great explanation, so it took me a long time to solve.
It works only with Mozilla Firefox. Please see the code below.(Check Output on Mozilla FireFor)
<!DOCTYPE html>
<html>
<head>
<title>
Table
</title>
<style>
td,th{
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellpadding="5px">
<thead>
<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>
</thead>
<tbody>
<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="4">Tuesday</td>
<td>8:00 a.m</td>
<td>11:00 a.m</td>
<td rowspan="2">XPath</td>
</tr>
<tr>
<td rowspan="2">11:00 a.m</td>
<td rowspan="2">2:00 p.m</td>
</tr>
<tr>
<td rowspan="2">XSL transformation</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>XLS Formatting Objects</td>
</tr>
</tbody>
</table>
<p>By Umer Khalid</p>
</body>
</html>
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="30">
<meta name="keywords" content="Time Table">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="30">
<meta name="keywords" content="Time Table">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
</head>
<body>
<!-- Table->1 -->
<p>
<strong>TABLE : 1</strong>
</p>
<br>
<table border="2" cellspacing="0" width="500" height="400" cellpadding="8">
<thead>
<tr>
<th rowspan="12">
TCB
</th>
</tr>
<tr>
<th>
Order no:
</th>
<td colspan="4">
#ABC001
</td>
</tr>
<th>
Order Date:
</th>
<td colspan="4">
23-Mar-2022
</td>
<tr>
<th colspan="4">
Customer
</th>
</tr>
<tr>
<th>
Name:
</th>
<td colspan="4">
John Paps
</td>
</tr>
<th>
Address:
</th>
<td colspan="4">
Independence Day 5th str, 11511
</td>
<tr>
<th colspan="4">
Order Details
</th>
</tr>
<tr>
<td>
1
</td>
<td>
Of Mice and Men
</td>
<td>book</td>
<td align="center">10.00$</td>
</tr>
<tr>
<td>
2
</td>
<td>
Les Miserables
</td>
<td>book</td>
<td align="center">12.00$</td>
</tr>
<tr>
<td>
3
</td>
<td>
Game of Thrones-S01
</td>
<td>DVD</td>
<td align="center">50$</td>
</tr>
<tr>
<td>
4
</td>
<td>
Samsung Galaxy
</td>
<td>Mobile Phone</td>
<td align="center">200$</td>
</tr>
<tr>
<th colspan="3" align="right">
Total:
</th>
<td align="center">
272.00$
</td>
</tr>
</thead>
</table>
<br>
<!-- Table->2 -->
<p>
<strong>TABLE : 2</strong>
</p>
<br>
<table border="2" cellspacing="0" width="400" height="200" cellpadding="8">
<tr>
<td rowspan="2">
</td>
<th colspan="2" align="center">Average</th>
<th rowspan="2">Red eyes</th>
</tr>
<tr>
<th align="center">Height</th>
<th align="center">Weight</th>
</tr>
<tr>
<th>
Males
</th>
<td>
1.9
</td>
<td>
0.003
</td>
<td>40%</td>
</tr>
<tr>
<th>
Females
</th>
<td>
1.7
</td>
<td>
0.002
</td>
<td>43%</td>
</tr>
</table>
<!-- Table->3 -->
<p>
<strong>TABLE : 3</strong>
</p>
<br>
<table border="2" width="600" height="300" cellspacing="0" cellpadding="8">
<tbody>
<!-- Part->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>
<!-- Part->2 -->
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 pm</td>
<td align="center">Introduction to XML</td>
</tr>
<tr>
<td align="center">Validity: DTD and Relax NG</td>
</tr>
<!-- Part->3 -->
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 am</td>
<td>11:00 am</td>
<td rowspan="2" align="center">XPath</td>
</tr>
<tr>
<td>11:00 am</td>
<td>2:00 pm</td>
</tr>
<tr>
<td>2:00 pm</td>
<td>5:00 pm</td>
<!-- <td rowspan="2">XSL transformation</td> -->
<td align="center">XSL transformation</td>
</tr>
<!-- Part->4 -->
<tr>
<td>Wednesday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td align="center">XLS Formatting Objects</td>
</tr>
</tbody>
</table>
</body>
</html>
<!-- Table->3 -->
<p>
<strong>TABLE : 3</strong>
</p>
<br>
<table border="2" width="600" height="300" cellspacing="0" cellpadding="8">
<tbody>
<!-- Part->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>
<!-- Part->2 -->
<tr>
<td rowspan="2">Monday</td>
<td rowspan="2">8:00 am</td>
<td rowspan="2">5:00 pm</td>
<td align="center">Introduction to XML</td>
</tr>
<tr>
<td align="center">Validity: DTD and Relax NG</td>
</tr>
<!-- Part->3 -->
<tr>
<td rowspan="3">Tuesday</td>
<td>8:00 am</td>
<td>11:00 am</td>
<td rowspan="2" align="center">XPath</td>
</tr>
<tr>
<td>11:00 am</td>
<td>2:00 pm</td>
</tr>
<tr>
<td>2:00 pm</td>
<td>5:00 pm</td>
<!-- <td rowspan="2">XSL transformation</td> -->
<td align="center">XSL transformation</td>
</tr>
<!-- Part->4 -->
<tr>
<td>Wednesday</td>
<td>8:00 am</td>
<td>12:00 pm</td>
<td align="center">XLS Formatting Objects</td>
</tr>
</tbody>
</table>
</body>
</html>
<table style="width: 50%;">
<tr>
<th rowspan="3">Day</th>
<th colspan="3" style="text-align: center;">Seminar</th>
</tr>
<tr>
<th colspan="2" style="text-align: center;">schedule</th>
<th rowspan="2" colspan="2" style="text-align: center;">Topic</th>
</tr>
<tr>
<th style="text-align: center;">Began</th>
<th style="text-align: center;">End</th>
</tr>
<tr>
<th rowspan="2" style="text-align: center;">Monday</th>
<td rowspan="2" style="text-align: center;">08:00 a.m.</td>
<td rowspan="2" style="text-align: center;">11:00 p.m.</td>
<td style="text-align: center;">Introduction to xml</td>
</tr>
<tr>
<td style="text-align: center;">Validity: DTD and Relax NG</td>
</tr>
<tr>
<th rowspan="3" style="text-align: center;">tuseday</th>
<td style="text-align: center;">8:00 a.m.</td>
<td style="text-align: center;">11:00 p.m.</td>
<td rowspan="2" style="text-align: center;">Xpath</td>
</tr>
<tr>
<td>11:00 a.m.</td>
<td>2:00 p.m.</td>
</tr>
<tr>
<td>2:00 a.m.</td>
<td>5:00 p.m.</td>
<td rowspan="1" style="text-align: center;">XSL transformations</td>
</tr>
<tr>
<th style="text-align: center;">Wensday</th>
<td>8:00 a.m.</td>
<td>12:00 p.m.</td>
<td style="text-align: center;">XLs formating objects</td>
</tr>
</table>