How To Create A Simple Flat Calendar Table Using CSS And HTML. Calendar is also used to look at the date but also often used to set the schedule. Often a certain date in the circle and marked so that easy to your remember. In web design, we can make it, but first we need to learn how to create a calendar design using css and html. In this tutorial, we will create a simple flat beautiful and attractive calendar for your website.
How To Create A Simple Flat Calendar Table Using CSS And HTML
Just use CSS and HTML, the display of calendar table can be made as below :
You want to learn how to make a flat calendar table using css and html? let us consider how to create it …
Download now
Create HTML Code
First, we create the calendar table using html table tags. For example, the HTML code is as follows :
<table class="calendar">
<thead class="days-week">
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>R</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="scnd-font-color" href="">2</a></td>
<td><a class="scnd-font-color" href="">3</a></td>
<td><a class="scnd-font-color" href="">4</a></td>
<td><a class="scnd-font-color" href="">5</a></td>
<td><a class="scnd-font-color" href="">6</a></td>
<td><a class="scnd-font-color" href="">7</a></td>
<td><a class="scnd-font-color" href="">8</a></td>
</tr>
<tr>
.....
</tr>
</tbody>
</table>
Create CSS Code
Next is the CSS code for each class in the html table above. Here is the entire CSS code and should be stored in a special css file, for example is :
flat-calendar-table.css
/** How To Create A Simple Dynamic Calendar Table With PHP | Tutorial.World.Edu **/
@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,700);
@import url(http://weloveiconfonts.com/api/?family=entypo|fontawesome|zocial);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* fontawesome */
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
/* zocial */
[class*="zocial-"]:before {
font-family: 'zocial', sans-serif;
}
@font-face {
font-family: 'icomoon';
src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot');
src:url('http://jlalovi-cv.herokuapp.com/font/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://jlalovi-cv.herokuapp.com/font/icomoon.ttf') format('truetype'),
url('http://jlalovi-cv.herokuapp.com/font/icomoon.woff') format('woff'),
url('http://jlalovi-cv.herokuapp.com/font/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-cloudy:before {
content: "\e60f";
}
.icon-sun:before {
content: "\e610";
}
.icon-cloudy2:before {
content: "\e611";
}
/************************************* END FONTS *************************************/
/** MAIN CONTAINER **/
.main-container {
font-family: 'Ubuntu', sans-serif;
width: 950px;
height: 1725px;
margin: 6em auto;
}
/** CONTAINERS **/
.container {
float: left;
width: 300px;
}
.block {
margin-bottom: 25px;
background: #394264;
border-radius: 5px;
}
.right-container {}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #1f253d;
}
h1 {
font-size: 23px;
}
h2 {
font-size: 17px;
}
p {
font-size: 15px;
}
a {
text-decoration: none;
font-size: 15px;
}
a:hover {
text-decoration: underline;
}
h1, h2, p, a, span{
color: #fff;
}
.scnd-font-color {
color: #9099b7;
line-height: 0;
}
.icon {
font-size: 25px;
}
.titular {
display: block;
line-height: 60px;
margin: 0;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.arrow-btn-container {
position: relative;
}
.arrow-btn {
position: absolute;
display: block;
width: 60px;
height: 60px;
-webkit-transition: background .3s;
transition: background .3s;
}
.arrow-btn:hover {
text-decoration: none;
}
.arrow-btn.left {
border-top-left-radius: 5px;
}
.arrow-btn.right {
border-top-right-radius: 5px;
right: 0;
top: 0;
}
.arrow-btn .icon {
display: block;
font-size: 18px;
border: 2px solid #fff;
border-radius: 100%;
line-height: 17px;
width: 21px;
margin: 20px auto;
text-align: center;
}
.arrow-btn.left .icon {
padding-right: 2px;
}
.calendar-day {
height: 320px;
background: #3468af;
}
.calendar-day .titular {
background: #1a4e95;
}
.calendar-day .arrow-btn:hover {
background: #16417E;
}
.calendar-day .the-day {
margin: 0;
text-align: center;
font-size: 146px;
}
.add-event.button {
background: #4fc4f6;
}
.add-event.button:hover {
background: #35aadc;
}
.calendar-month {
height: 380px;
}
.calendar-month .titular {
background: #3468af;
}
.calendar-month .arrow-btn:hover {
background: #1a4e95;
}
.calendar {
margin: 22px 15px;
text-align: center;
}
.calendar a {
font-size: 17px;
}
.calendar td, .calendar th {
width: 40px;
height: 38px;
}
.calendar .days-week {
color: #4fc4f6;
}
.calendar .today {
display: block;
width: 34px;
line-height: 34px;
background: #e64c65;
border-radius: 100%;
}
Furthermore, make an external css link that leads to a flat-calendar-table.css file. Put the external link above </head> tag.
Here is an example of the overall html pages to display this flat calendar table …
flat-calendar-table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> How To Create A Simple Flat Calendar Table Using CSS And HTML | Tutorial.World.Edu </title>
<link type='text/css' rel='stylesheet' href='flat-calendar-table.css' />
</head>
<body>
<div class="main-container">
<div class="right-container container">
<p style="text-align:center;"><a style="font-size:22px;" href="http://tutorial.world.edu/website-design/how-to-create-simple-flat-calendar-table-using-css-html/">Simple Flat Calendar Table Using CSS</a></p>
<div class="calendar-month block"> <!-- CALENDAR MONTH -->
<div class="arrow-btn-container">
<a class="arrow-btn left" href=""><span class="icon fontawesome-angle-left"></span></a>
<h2 class="titular">APRIL 2015</h2>
<a class="arrow-btn right" href=""><span class="icon fontawesome-angle-right"></span></a>
</div>
<table class="calendar">
<thead class="days-week">
<tr>
<th>S</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>R</th>
<th>F</th>
<th>S</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a class="scnd-font-color" href="#100">1</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#101">2</a></td>
<td><a class="scnd-font-color" href="#102">3</a></td>
<td><a class="scnd-font-color" href="#103">4</a></td>
<td><a class="scnd-font-color" href="#104">5</a></td>
<td><a class="scnd-font-color" href="#105">6</a></td>
<td><a class="scnd-font-color" href="#106">7</a></td>
<td><a class="scnd-font-color" href="#107">8</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#108">9</a></td>
<td><a class="scnd-font-color" href="#109">10</a></td>
<td><a class="scnd-font-color" href="#110">11</a></td>
<td><a class="scnd-font-color" href="#111">12</a></td>
<td><a class="scnd-font-color" href="#112">13</a></td>
<td><a class="scnd-font-color" href="#113">14</a></td>
<td><a class="scnd-font-color" href="#114">15</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#115">16</a></td>
<td><a class="scnd-font-color" href="#116">17</a></td>
<td><a class="scnd-font-color" href="#117">18</a></td>
<td><a class="scnd-font-color" href="#118">19</a></td>
<td><a class="scnd-font-color" href="#119">20</a></td>
<td><a class="scnd-font-color" href="#120">21</a></td>
<td><a class="scnd-font-color" href="#121">22</a></td>
</tr>
<tr>
<td><a class="scnd-font-color" href="#122">23</a></td>
<td><a class="scnd-font-color" href="#123">24</a></td>
<td><a class="scnd-font-color" href="#124">25</a></td>
<td><a class="today" href="#125">26</a></td>
<td><a href="#126">27</a></td>
<td><a href="#127">28</a></td>
<td><a href="#128">29</a></td>
</tr>
<tr>
<td><a href="#129">30</a></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div> <!-- end calendar-month block -->
<p style="text-align:right;font-size:12px;">by <a style="font-size:12px;" href="http://tutorial.world.edu">Tutorial.World.Edu</a></p>
</div> <!-- end right-container -->
</div> <!-- end main-container -->
</body>
</html>
This tutorial discusses how to create a table just for the website calendar. If you need a script that can display a calendar automatically, is what you get in the previous tutorial on How To Create A Simple Dynamic Table With PHP Calendar
Thanks for reading How To Create A Simple Flat Calendar Table Using CSS And HTML