I have a python script which dynamically generates a HTML Table according to some specifications provided to it.
A sample generated output is given below,
As you can see, it is possible that,
- It is possible for two consecutive cells to be merged (it is done from the Python Script, again. With the help of Jinja2)
- It is also possible for one cell to be divided horizontally into two or more sections
^These two possibilities can occur at any position in the HTML table.
The main issue I am facing here is this that I am getting unnecessary spacing/padding in all my cells (which are not horizontally divided). I don't understand the cause behind it and I can't seem to resolve this issue either. Can anyone help me to identify what changes do I need to make to make it look more presentable (i.e., no unnecessary space above and below the text in all cells). For example, in the first cell, there's unnecessary padding added above the "Calculus and Analytical Geometry" and also below the "Dr. Mushtaq Ahmed" Text. However, in the same HTML table, if you look at the cell which is horizontally divided into two sections, this padding is not being added.
Similarly, I want to somehow align the "Name" and the "Room" in one Row. For example, for the first Cell, "Dr. Mushtaq Ahmed" and "Room #1" should be aligned in same row (rather than in two different rows). I have tried to make different changes to achieve this but they don't seem to work properly (One change did work for me, but it disrupted the shape of the Horizontally divided cell and hence, I didn't adopt it)
What I am actually looking to get is similar to this image,
The code for the HTML Table I shared above is as follows,
:root {
--border-strong: 3px solid #777;
--border-normal: 1px solid gray;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
}
table>caption {
font-size: 6mm;
font-weight: bolder;
letter-spacing: 1mm;
}
/* 210 x 297 mm */
table {
width: 297mm;
height: 210mm;
border-collapse: collapse;
}
td {
border: var(--border-normal);
position: relative;
font-size: 2.6mm;
font-weight: bold;
}
tbody tr:nth-child(odd) {
background: #eee;
}
tbody tr:last-child {
border-bottom: var(--border-strong);
}
tbody tr> :last-child {
border-right: var(--border-strong);
}
/* top header */
.top_head>th {
width: 54mm;
height: 10mm;
vertical-align: bottom;
border-top: var(--border-strong);
border-bottom: var(--border-strong);
border-right: 1px solid gray;
}
.top_head :first-child {
width: 27mm;
border: var(--border-strong);
}
.top_head :last-child {
border-right: var(--border-strong);
}
/* left header */
tbody th {
border-left: var(--border-strong);
border-right: var(--border-strong);
border-bottom: 1px solid gray;
}
tbody>tr:last-child th {
border-bottom: var(--border-strong);
}
/* row */
tbody td>div {
height: 34mm;
overflow: hidden;
}
.vertical_span_all {
font-size: 5mm;
font-weight: bolder;
text-align: center;
border-bottom: var(--border-strong);
}
.vertical_span_all div {
height: 10mm;
}
/* td contents */
.note {
font-size: 3mm;
}
.note :last-child {
float: right;
}
@page {
margin: 5mm;
}
.new-page {
page-break-before: always;
}
.center
{
text-align: center;
}
.left
{
text-align: left;
margin-left: 6px;
/*margin-top: 10px;*/
}
.right
{
text-align: right; margin-right: 4px;
}
.teacher
{
margin-left: 4px;
}
td{
height:175px;
width:150px;
}<!DOCTYPE html>
<html>
<body>
<!-- Heading -->
<h1 class="center">CS-1D</h1>
<!-- Table -->
<table border="1">
<!-- Day/Periods -->
<tr>
<td class="center" ><br>
<b>Day/Period</b></br>
</td>
<td class="center" >
<b>I</b>
</td>
<td class="center" >
<b>II</b>
</td>
<td class="center">
<b>III</b>
</td>
<td class="center">
<b>1:15-1:45</b>
</td>
<td class="center" >
<b>IV</b>
</td>
<td class="center" >
<b>V</b>
</td>
</tr>
<!-- Monday -->
<tr>
<td class="center">
<b>Monday</b></td>
<td colspan=1>
<p class="left">Calculus and Analytical Geometry</p>
<p class = "right">Room #1</p>
<p class = "teacher">Dr.Mushtaq Ahmad</p>
<!-- <p class="left">Calculus_and_Analytical_Geometry@Room_#1@Dr.Mushtaq_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
</td>
<td colspan=1>
<p class="left">Programming Fundamentals</p>
<p class = "right">Room #9</p>
<p class = "teacher">Dr. Rabia Maqsood</p>
<!-- <p class="left">Programming_Fundamentals@Room_#9@Dr._Rabia_Maqsood</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td rowspan="6" class="center">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan=2>
<p class="left">Programming Fundamentals - Lab</p>
<p class = "right">Lab #1</p>
<p class = "teacher">Muhammad Azeem Iftikhar</p>
<!-- <p class="left">Programming_Fundamentals_-_Lab@Lab_#1@Muhammad_Azeem_Iftikhar</p>
<p class="right">2</p>
<p class="teacher"></p> --></td>
</tr>
<!-- Tuesday -->
<tr>
<td class="center">
<b>Tuesday</b>
</td>
<td colspan=1>
</td>
<td colspan=1>
</td>
<td colspan=1>
<p class="left">English Composition and Comprehension - Lab</p>
<p class = "right">Room #1</p>
<p class = "teacher">Rida Akram<hr>English Composition and Comprehension</p>
<!-- <p class="left">English_Composition_and_Comprehension_-_Lab@Room_#1@Rida_Akram<hr>English_Composition_and_Comprehension@Room_#7@Sadia_Ashfaq</p>
<p class="right">1</p>
<p class="teacher"></p> --><p class="left"></p>
<p class = "right">Room #7</p>
<p class = "teacher">Sadia Ashfaq</p>
<!-- <p class="left">English_Composition_and_Comprehension_-_Lab@Room_#1@Rida_Akram<hr>English_Composition_and_Comprehension@Room_#7@Sadia_Ashfaq</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
<p class="left">English Composition and Comprehension - Lab</p>
<p class = "right">Room #1</p>
<p class = "teacher">Rida Akram</p>
<!-- <p class="left">English_Composition_and_Comprehension_-_Lab@Room_#1@Rida_Akram</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
<p class="left">English Composition and Comprehension</p>
<p class = "right">Room #3</p>
<p class = "teacher">Farah Iqbal</p>
<!-- <p class="left">English_Composition_and_Comprehension@Room_#3@Farah_Iqbal</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
</tr>
<!-- Wednesday -->
<tr>
<td class="center">
<b>Wednesday</b>
</td>
<td colspan=1>
<p class="left">Islamic Studies/Ethics</p>
<p class = "right">Room #7</p>
<p class = "teacher">Zia Ahmad</p>
<!-- <p class="left">Islamic_Studies/Ethics@Room_#7@Zia_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
</td>
<td colspan=1>
<p class="left">English Composition and Comprehension</p>
<p class = "right">Room #6</p>
<p class = "teacher">Sadia Ashfaq</p>
<!-- <p class="left">English_Composition_and_Comprehension@Room_#6@Sadia_Ashfaq</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
</td>
<td colspan=1>
<p class="left">Applied Physics</p>
<p class = "right">Room #1</p>
<p class = "teacher">Waheed Ahmad</p>
<!-- <p class="left">Applied_Physics@Room_#1@Waheed_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
</tr>
<!-- Thursday -->
<tr>
<td class="center">
<b>Thursday</b>
</td>
<td colspan=1>
</td>
<td colspan=1>
<p class="left">Calculus and Analytical Geometry</p>
<p class = "right">Room #5</p>
<p class = "teacher">Dr.Mushtaq Ahmad</p>
<!-- <p class="left">Calculus_and_Analytical_Geometry@Room_#5@Dr.Mushtaq_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
<p class="left">Programming Fundamentals</p>
<p class = "right">Room #10</p>
<p class = "teacher">Dr. Rabia Maqsood</p>
<!-- <p class="left">Programming_Fundamentals@Room_#10@Dr._Rabia_Maqsood</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
<p class="left">English Composition and Comprehension</p>
<p class = "right">Room #4</p>
<p class = "teacher">Farah Iqbal</p>
<!-- <p class="left">English_Composition_and_Comprehension@Room_#4@Farah_Iqbal</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=1>
<p class="left">Applied Physics</p>
<p class = "right">Room #1</p>
<p class = "teacher">Waheed Ahmad</p>
<!-- <p class="left">Applied_Physics@Room_#1@Waheed_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
</tr>
<!-- Friday -->
<tr>
<td class="center">
<b>Friday</b>
</td>
<td colspan=1>
<p class="left">Islamic Studies/Ethics</p>
<p class = "right">Room #6</p>
<p class = "teacher">Zia Ahmad</p>
<!-- <p class="left">Islamic_Studies/Ethics@Room_#6@Zia_Ahmad</p>
<p class="right">1</p>
<p class="teacher"></p> --></td>
<td colspan=2>
<p class="left">Introduction to Information and Communication Technology - Lab</p>
<p class = "right">Lab #4</p>
<p class = "teacher">Aqsa Younas</p>
<!-- <p class="left">Introduction_to_Information_and_Communication_Technology_-_Lab@Lab_#4@Aqsa_Younas</p>
<p class="right">2</p>
<p class="teacher"></p> --></td>
<td colspan=2>
<p class="left">English Composition and Comprehension - Lab</p>
<p class = "right">Room #3</p>
<p class = "teacher">Amna Farooq</p>
<!-- <p class="left">English_Composition_and_Comprehension_-_Lab@Room_#3@Amna_Farooq</p>
<p class="right">2</p>
<p class="teacher"></p> --></td>
</tr>
</table>
</body>
<p class = "new-page"></div>
</html>Here is the template.html code which is being used to generate the HTML Files. Multiple HTML files are being generated (for different sections) and then they are combined to make a PDF file. Therefore, it is important that height of the table is maintained, so that every generated HTML file covers one complete page of PDF File. Although, I don't need anybody to understand this template.html file and any changes made in the above shared HTML code can easily be done in this file ultimately.
https://pastebin.com/154ErqUU
pasted the code on pastebin because character limit had exceeded.