How to Create Time-Table schedule using HTML ?

-

 How to Create Time-Table schedule using HTML ?


A Table is an arrangement of rows and columns. Anyone can create a table by knowing the basics of HTML(HyperText Markup Language). A table is defined by using <table> tag in HTML.

Steps to Create a Table:

Create a <html> tag.
Create a table using the tags <table></table>.
Create rows in the table using <tr>This is the row tag</tr>.
Insert the data into rows using <td> Table Data</td> tags.
Close the table tag. 
Close the html tag </html>.
This is the basic Time table created in HTML without the usage of font color and background colors.



(This is the basic Time table created in HTML without the usage of font color and background colors.)




Example:

<!DOCTYPE html>
<html>

<body>
<h1>TIME TABLE</h1>
<table border="5" cellspacing="0" align="center">
<!--<caption>Timetable</caption>-->
<tr>
<td align="center" height="50"
width="100"><br>
<b>Day/Period</b></br>
</td>
<td align="center" height="50"
width="100">
<b>I<br>9:30-10:20</b>
</td>
<td align="center" height="50"
width="100">
<b>II<br>10:20-11:10</b>
</td>
<td align="center" height="50"
width="100">
<b>III<br>11:10-12:00</b>
</td>
<td align="center" height="50"
width="100">
<b>12:00-12:40</b>
</td>
<td align="center" height="50"
width="100">
<b>IV<br>12:40-1:30</b>
</td>
<td align="center" height="50"
width="100">
<b>V<br>1:30-2:20</b>
</td>
<td align="center" height="50"
width="100">
<b>VI<br>2:20-3:10</b>
</td>
<td align="center" height="50"
width="100">
<b>VII<br>3:10-4:00</b>
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Monday</b></td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td rowspan="6" align="center" height="50">
<h2>L<br>U<br>N<br>C<br>H</h2>
</td>
<td colspan="3" align="center"
height="50">LAB</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Tuesday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">SPORTS</td>
</tr>
<tr>
<td align="center" height="50">
<b>Wednesday</b>
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LIBRARY
</td>
</tr>
<tr>
<td align="center" height="50">
<b>Thursday</b>
</td>
<td align="center" height="50">Phy</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
</tr>
<tr>
<td align="center" height="50">
<b>Friday</b>
</td>
<td colspan="3" align="center"
height="50">LAB
</td>
<td align="center" height="50">Mat</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Phy</td>
</tr>
<tr>
<td align="center" height="50">
<b>Saturday</b>
</td>
<td align="center" height="50">Eng</td>
<td align="center" height="50">Che</td>
<td align="center" height="50">Mat</td>
<td colspan="3" align="center"
height="50">SEMINAR
</td>
<td align="center" height="50">SPORTS</td>
</tr>
</table>
</body>

</html>





output :





We can also add the styling elements such as font color, back ground color, back ground image, etc. to the above Time table. The attributes that can be added to table are:

  1. align: Aligns left, right and center.
  2. border: Sets the border of a table(table border width)
  3. bgcolor: Sets the background color for a cell or whole table.
  4. colspan: Sets the number of columns to be spanned.
  5. rowspan: Sets the number of columns to be spanned.
  6. cellspacing: Creates space between the cells.
  7. cellpadding: Creates space within the cells.
  8. background: Sets the table background with an image.
  9. width: Sets width of the table.
  10. height: Sets height of the table

posted by @codewithashish



Comments

Post a Comment

Popular posts from this blog

The Top 10 Python Frameworks For Web Development💻

-
Image
The Top 10 Python Frameworks For Web Development Get the “ Top 10 Python Web Frameworks ” build, which contains a version of Python and most of the tools listed in this post so you can test them out for yourself. Python web frameworks have always been key to web development, even though Python gets a lot of kudos for its use in the Machine Learning space these days. In fact, whenever I whip up a prototype of a new idea, I usually wrap it around a web server before I test it out, or ask others to evaluate it. A web-based interface makes it far easier to interact with prototypes. In most cases, you don’t even need a GUI – a simple API served up by a web server can make your prototype just as easy to interact with. I usually pick a quick and easy web server like Python’s Flask, but there are hundreds of web frameworks in Python. This post highlights many of the major Python web frameworks, from the old guard that have been under development for more than a decade (like Django) to newcomer
Read more

6 Jobs You Can Land If You Learn Python

-
  6 Jobs You Can Land If You Learn Python Learning Python has gone mainstream. If you haven’t noticed, hundreds of today’s most successful  tech companies are using Python , including Instagram, Netflix, Reddit, Lyft, Google, and Spotify. But it’s also being used at the New York Times, Bloomberg, and even at your local bank. 1. Python Developer Becoming a Python developer is the most direct job out there for someone who knows the Python programming language. A Python developer can be expected to: Build websites Optimize data algorithms Solve data analytics problems Implementing security and data protection Writing reusable, testable and efficient code A wide array of companies listed with Randstad are looking for Python developers. Learn Python today, and tomorrow you could end up as a Python developer working at a startup like Lyft, or larger company like ADP. 2. Product Manager Product managers are responsible for researching new user features, find gaps in the market, and make an ar
Read more

TOP 5 LIVE CYBER ATTACK MAPS FOR VISUALIZING DIGITAL THREAT 🔴

-
Image
TOP 5 LIVE CYBER ATTACK MAPS FOR VISUALIZING DIGITAL THREAT  Recently, Broimum has conducted a  study  that shows how digital crime revenue has grown to 1.5 trillion dollars annually in illicit profits.  GitHub ,  EA  , and many other popular websites now face larger, hi-tech attacks every day, all while falling victim to the growing trend of cybercrime. Frantic internet users are asking questions like, Who is behind the attacks? Where are these attacks coming from? What’s the top attacker host? These questions can be answered by exploring the logs, then performing lookups for all available information. How does a DDoS attack work? A DDoS attack requires the attacker to gain control of a network of online machines. Computers are infected with malware, turning them into a bot. Then, the attacker has control over the group of bots, now called a botnet. Once a botnet is established, the attacker will send instructions to each bot from a remote control. Once the IP address is targeted, eac
Read more