How To Create A Simple Flat Calendar Table Using CSS And HTML

Share:

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

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 :
How To Create A Simple Flat Calendar Table Using CSS And HTMLYou want to learn how to make a flat calendar table using css and html? let us consider how to create it …

Download now How To Create A Simple Flat Calendar Table Using CSS And HTML

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

[Tutorial.World.Edu]

One thought on “How To Create A Simple Flat Calendar Table Using CSS And HTML

Leave a Reply

Your email address will not be published. Required fields are marked *