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 …
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