Issue
I have a Python code that is creating HTML Tables and then turning it into a PDF file. This is the output that I am currently getting
This image is taken from PDF File that is being generated as result (and it is zoomed out at 55%)
I want to make this look better. Something similar to this, if I may
This image has 13 columns, I don't want that. I want to keep 5 columns but my major concern is the size of the td in my HTML files. It is too small in width and that is why, the text is also very stacked up in each td. But if you look at the other image, text is much more visible and boxes are much more bigger width wise. Moreover, it doesn't suffer from height problems either (the height of the box is in such a way that it covers the whole of the PDF Page and all the tds don't look like stretched down)
I have tried to play around the height and width of my td in the HTML File, but unfortunately, nothing really seemed to work for me.
Edit: Using the code provided by onkar ruikar, I was able to achieve very good results. However, it created the same problem that I was facing previously. The question was asked here: Horizontally merge and divide cells in an HTML Table for Timetable based on the Data in Python File
I changed up the template.html file of mine and then ran the same code. But I got this result,
As you can see, that there were more than one lectures in the First Slot of Monday, and due to that, it overlapped both the courses. It is not reading the <hr> command properly in this HTML file now.
The modified template.html file has this code,
<!DOCTYPE html>
<html>
<header>
<style>
.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:130px;
width:120px;
}
: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 {
padding: 1mm;
border: var(--border-normal);
position: relative;
font-size: 2.1mm;
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 */
.left {
position: absolute;
top: 1mm;
left: 1mm;
}
.right {
position: absolute;
left: 1mm;
bottom: 1mm;
}
.teacher {
position: absolute;
right: 1mm;
bottom: 1mm;
}
.note {
font-size: 3mm;
}
.note :last-child {
float: right;
}
@page {
margin: 5mm;
}
</style>
</header>
<body>
<!-- Heading -->
<h1 class="center">{{name}}</h1>
<!-- Table -->
<table>
<!-- Day/Periods -->
<tr class = "top_head">
<th scope="col">Day/Period</th>
<th scope="col">I</th>
<th scope="col">II</th>
<th scope="col">III</th>
<th scope="col">1:15-1:45</th>
<th scope="col">IV</th>
<th scope="col">V</th>
</tr>
<tbody>
<!-- Monday -->
<tr>
<th scope="row" class = "center">
<b>Monday</b>
</th>
{% for course in monday %}
{% if loop.index == 4 %}
<td rowspan="6" class="vertical_span_all">
<div>L</div>
<div>U</div>
<div>N</div>
<div>C</div>
<div>H</div>
</td>
{% endif %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
<div>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</div>
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Tuesday -->
<tr>
<th scope="row" class = "center">
<b>Tuesday</b>
</th>
{% for course in tuesday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
<div>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</div>
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Wednesday -->
<tr>
<td class="center">
<b>Wednesday</b>
</td>
{% for course in wednesday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Thursday -->
<tr>
<td class="center">
<b>Thursday</b>
</td>
{% for course in thursday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
<!-- Friday -->
<tr>
<td class="center">
<b>Friday</b>
</td>
{% for course in friday %}
{% if course[1] != 0 %}
<td colspan={{course[1]}}>
{% set count = [] %}
{%- for y in range(0, 5) -%}
{%- if count|length < course[0]|length -%}
<p class="left">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "right">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
{% set __ = count.append(1) %}
<p class = "teacher">
{%- for z in range(count|length, course[0]|length) -%}
{%- if course[0][count|length] == '@' -%}
{%- else -%}
{% set __ = count.append(1) %}
{%- if course[0][count|length-1] == '_' -%}
{{' '}}
{%- else -%}
{{course[0][count|length-1]}}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
</p>
<!-- <p class="left">{{course[0]}}</p>
<p class="right">{{course[1]}}</p>
<p class="teacher">{{course[2]}}</p> -->
{%- endif -%}
{%- endfor -%}
</td>
{% endif %}
{% endfor %}
</tr>
</tbody>
</table>
<p class = "new-page"></div>
</body>
</html>
And the python file that I am running has the following code,
from typing import List
import pdfkit
from pdfkit.api import configuration
from jinja2 import FileSystemLoader, Environment
wkhtml_path = pdfkit.configuration(wkhtmltopdf = "C:\\Program Files\\wkhtmltopdf\\bin\\wkhtmltopdf.exe") #by using configuration you can add path value.
class section:
def __init__(self, id, course, section, instructor, room):
self.id = id
self.course = course
self.section = section
self.instructor = instructor
self.room = room
def generate_data():
data = {}
# For CS-1A
data["CS-1A"] = [["" for i in range(5)] for j in range(5)]
data["CS-1A"][0][0] += "Advance_Programming@Mr.Ashas@Room_#2 "
data["CS-1A"][0][0] += "Applied_Physics@Bilal@Room_#1 "
data["CS-1A"][0][1] += "Programming_Fundamentals@Muhammad_Bilal@Room_#1 "
data["CS-1A"][0][3] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "
data["CS-1A"][0][4] += "Programming_Fundamentals_Lab@Mr._Abid@Lab_#01 "
# You may change all these for testing purposes.
# data["CS-1A"][0][0].append(section(2, "Programming Fundamentals", "CS-1A", "Bilal", "Room #1"))
# data["CS-1A"][0][1].append(section(3, "Applied Physics", "CS-1A", "Muhammad Bilal", "Room #5"))
# obj = section(4, "Programming Lab", "CS-1A", "Mr. Abid", "Lab #01")
# data["CS-1A"][0][1].append(obj)
# data["CS-1A"][0][2].append(obj)
# data["CS-1A"][0][4].append(section(5, "English Communication", "CS-1A1", "Ms. Ayeza", "Cal Lab"))
# data["CS-1A"][0][4].append(section(6, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
# data["CS-1A"][1][1].append(section(7, "Linear Algebra", "CS-1A", "Ms. Zain", "Romm #2"))
# obj = section(8, "English Lab", "CS-1A", "Ms. Abida", "Lab #04")
# data["CS-1A"][1][3].append(obj)
# data["CS-1A"][1][4].append(obj)
# data["CS-1A"][2][0].append(section(9, "Social Studies", "CS-1A", "Mr. Zain Iqbal", "Room #14"))
# data["CS-1A"][2][4].append(section(10, "Programming Fundamentals", "CS-1A", "Bilal", "Room #15"))
# # No lectures on Thursday i.e. 3rd index
# obj = section(11, "English Lab", "CS-1A", "Ms. Abida", "Lab #03")
# data["CS-1A"][4][1].append(obj)
# data["CS-1A"][4][2].append(obj)
# data["CS-1A"][4][2].append(section(12, "English Communication", "CS-1A1", "Ms. Ayeza", "Room #3"))
# data["CS-1A"][4][2].append(section(13, "English Communication", "CS-1A2", "Ms. Ayesha", "GP Lab"))
#
#
#
# # For CS-1B
# data["CS-1B"] = [[[] for i in range(5)] for j in range(5)]
#
# data["CS-1B"][0][1].append(section(14, "Advance Programming", "CS-1B", "Mr. Ali Hassan", "Room #2"))
# data["CS-1B"][0][2].append(section(15, "English Comprehension and Communication", "CS-1B", "Mr. Bilal", "Room #1"))
# obj = section(15, "Software for Mobile and Devices", "CS-1B", "Mr. Jacob", "Room #5")
# data["CS-1B"][1][1].append(obj)
# data["CS-1B"][1][2].append(obj)
# data["CS-1B"][1][3].append(section(17, "Calculus and Geometrical Analytics", "CS-1B", "Ms. Nomi Khan", "Room #06"))
# data["CS-1B"][2][3].append(section(18, "Introduction to Information and Communication Technology - Lab", "CS-1B1", "Ms. Sarah Niaz", "Lab #01"))
# data["CS-1B"][2][3].append(section(19, "Introduction to Information and Communication Technology - Lab", "CS-1B2", "Ms. Julia John", "Lab #06"))
# data["CS-1B"][2][4].append(section(20, "English Comprehenseion and Communication", "Cs-1B", "Mr. Lionel Boyle", "Room #02"))
# data["CS-1B"][3][3].append(section(21, "Programming Fundamentals", "CS-1B", "Mr. Alex Niles", "Room #3"))
# data["CS-1B"][4][2].append(section(22, "Linear Algebra", "CS-1B", "Ms. Ayesha", "GP Lab"))
return data
def organise_input_data(elements: List[List[str]]) -> List[list]:
"""
Organises the input data to find double courses for easier use in templates
"""
new_elements = []
for day in elements:
last_course = None
course_list = []
index = 0
for course in day:
# cleanup data
course = course.strip().replace(" ", "<hr>")
# check if long course (and not lunch time)
if course != "" and course == last_course and index != 3:
course_list.remove((course, 1))
course_list.append((course, 2))
course_list.append(("none", 0))
else:
course_list.append((course.replace(" ", "<hr>"), 1))
last_course = course
index += 1
new_elements.append(course_list)
return new_elements
def generate_html(template, name: str, elements: List[list]) -> str:
new_elements = organise_input_data(elements=elements)
rendered = template.render(
name=name,
monday=new_elements[0],
tuesday=new_elements[1],
wednesday=new_elements[2],
thursday=new_elements[3],
friday=new_elements[4]
)
with open(f"out_{name}.html", "w+") as file:
file.write(rendered)
return rendered
def run(input_data):
# Init jinja
file_loader = FileSystemLoader('.')
env = Environment(loader=file_loader)
template = env.get_template('template.html')
full_text = ""
for name, elements in input_data.items():
full_text += generate_html(template=template, name=name, elements=elements)
pdfkit.from_string(full_text, "out.pdf", configuration = wkhtml_path)
if __name__ == '__main__':
data = generate_data()
run(data)
Solution
If you are targeting print media then you need to specify absolute dimensions in mm, cm, inch. If you are printing on A4 page then your page is 210x297mm and you need to print it in landscape mode.
For printing/pdf the page needs to be styled like this:
: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 {
padding: 1mm;
border: var(--border-normal);
position: relative;
font-size: 2.1mm;
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 */
.left {
width: 95%;
position: absolute;
top: 1mm;
left: 1mm;
}
.left>div {
width: 100%;
margin-bottom: 3mm;
border-bottom: 1px dashed;
}
.right {
position: absolute;
left: 1mm;
bottom: 1mm;
}
.teacher {
position: absolute;
right: 1mm;
bottom: 1mm;
}
.note {
font-size: 3mm;
}
.note :last-child {
float: right;
}
@page {
margin: 5mm;
}<!-- Table -->
<table>
<caption>CS-1A</caption>
<thead>
<tr class='top_head'>
<th scope="col">Day/Period</th>
<th scope="col">I</th>
<th scope="col">II</th>
<th scope="col">III</th>
<th scope="col">1:15-1:45</th>
<th scope="col">IV</th>
<th scope="col">V</th>
</tr>
</thead>
<tbody>
<!-- Monday -->
<tr>
<th scope="row" class="center">
<b>Monday</b>
</th>
<td colspan=1>
<div class="left">
<div>Digital Logic Design</div>
<div>Applied Physics</div>
<div>Advanced Programming</div>
</div>
<p class="right">Mirza Waqar Baig</p>
<p class="teacher">CS-1A</p>
</td>
<td colspan=1>
<div class="left">
<div>English Composition and Comprehension</div>
<div>Applied Physics</div>
</div>
<p class="right">Muhammad Ammar</p>
<p class="teacher">CS-1A2</p>
</td>
<td colspan=1>
</td>
<td rowspan="6" class="vertical_span_all">
<div>L</div>
<div>U</div>
<div>N</div>
<div>C</div>
<div>H</div>
</td>
<td colspan=1>
<div>
<div class="left">English Composition and Comprehension</div>
<p class="right">Junaid Shahid</p>
<p class="teacher">CS-1A1</p>
</div>
</td>
<td colspan=1>
<div>
<div class="left">Programming Fundamentals</div>
<p class="right">Rizwan ul Haq</p>
<p class="teacher">CS-1A</p>
</div>
</td>
</tr>
<!-- Tuesday -->
<tr>
<th scope="row" class="center">
<b>Tuesday</b>
</th>
<td colspan=1>
<div>
<div class="left">Programming Fundamentals</div>
<p class="right">Rizwan ul Haq</p>
<p class="teacher">CS-1A</p>
<div>
</td>
<td colspan=2>
<div>
<div>
<div class="left">Programming Fundamentals - Lab</div>
<p class="right">Mughees Ismail</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=1>
<div>
<div class="left">Islamic Studies/Ethics</div>
<p class="right">Rizwanullah</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=1>
<div>
<div class="left">English Composition and Comprehension</div>
<p class="right">Junaid Shahid</p>
<p class="teacher">CS-1A1</p>
</div>
</td>
</tr>
<!-- Wednesday -->
<tr>
<th scope="row" class="center">
<b>Wednesday</b>
</th>
<td colspan=1>
<div>
<div class="left">Digital Logic Design</div>
<p class="right">Mirza Waqar Baig</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=2>
<div>
<div class="left">Digital Logic Design - Lab</div>
<p class="right">Muhammad Arslan</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=2>
<div>
<div class="left">Introduction to Information and Communication Technology - Lab</div>
<p class="right">Muiz Qadir</p>
<p class="teacher">CS-1A</p>
</div>
</td>
</tr>
<!-- Thursday -->
<tr>
<th scope="row" class="center">
<b>Thursday</b>
</th>
<td colspan=1>
<div>
<div class="left">Linear Algebra</div>
<p class="right">Amjad Hussain</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=2>
<div>
<div class="left">English Composition and Comprehension - Lab</div>
<p class="right">Muhammad Iqbal</p>
<p class="teacher">CS-1A2</p>
</div>
</td>
<td colspan=2>
<div>
<div class="left">English Composition and Comprehension - Lab</div>
<p class="right">Sadia Ashfaq</p>
<p class="teacher">CS-1A1</p>
</div>
</td>
</tr>
<!-- Friday -->
<tr>
<th scope="row" class="center">
<b>Friday</b>
</th>
<td colspan=1>
<div>
<div class="left">English Composition and Comprehension</div>
<p class="right">Muhammad Ammar</p>
<p class="teacher">CS-1A2</p>
</div>
</td>
<td colspan=1>
<div>
<div class="left">Islamic Studies/Ethics</div>
<p class="right">Rizwanullah</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=1>
<div>
</div>
</td>
<td colspan=1>
<div>
<div class="left">Linear Algebra</div>
<p class="right">Amjad Hussain</p>
<p class="teacher">CS-1A</p>
</div>
</td>
<td colspan=1>
<div>
</div>
</td>
</tr>
</tbody>
</table>
<div class='note'><span>w.e.f. Monday, September 13, 2021</span> <span>aSc Timetables</span></div>This is how it looks while printing pdf:
To have multiple courses in one cell use structure like this:
<td colspan=1>
<div class="left">
<div>Digital Logic Design</div>
<div>Applied Physics</div>
<div>Advanced Programming</div>
</div>
<p class="right">Mirza Waqar Baig</p>
<p class="teacher">CS-1A</p>
</td>
Also look at the modified style.
Answered By - the Hutt Answer Checked By - Marie Seifert (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.