HTML Project

Chapter: 5

Insert Table & Links in html page

insert table in html page
and links in table
Start from index.html file

Open index.html file

Step-1
Where the division<div class="col_one_third_last"> is over, after it add new division in index.html
with class name "col_two_third"
now add a table in this division
or copy and paste the following code in it
<div class="col_two_third"><!-- col_two_third for table Start here -->
  <h3>this is my table</h3>
  <table style="width:100%">
	<tr>
	  <th align="left" width="10%">No.</th>
	  <th align="left" width="35%">Subject</th>
	  <th align="left" width="55%">Link</th>
	</tr>
	<tr>
	  <td>1</td>
	  <td>html</td>
	  <td><a href="http://www.freeeducation.me/html/html_intro.php">Learn html</a></td>
	</tr>
	<tr>
	  <td>2</td>
	  <td>css</td>
	  <td><a href="http://www.freeeducation.me/sub_css/css_intro.php">Learn css</a></td>
	</tr>
	<tr>
	  <td>3</td>
	  <td>php</td>
	  <td><a href="http://www.freeeducation.me/sub_php/php_intro.php">Learn php</a></td>
	</tr>
	<tr>
	  <td>4</td>
	  <td>JavaScript</td>
	  <td><a href="http://www.freeeducation.me">Learn JavaScript</a></td>
	</tr>
	<tr>
	  <td>5</td>
	  <td>Android</td> <td><a href="http://www.freeeducation.me">Learn Android</a></td>
	</tr>
	<tr>
	  <td>6</td>
	  <td>Bootstrap</td>
	  <td><a href="http://www.freeeducation.me">Learn Bootstrap</a></td>
	</tr>
  </table>
</div><!-- col_two_third for table over here -->

Open style.css file

Step-2
add code for table in style.css
or copy and paste the following code in it
.col_two_third table{
	text-decoration: none;
	font-size:20px;
	border-collapse: collapse
}

.col_two_third table a{
	font-size:16px;
	font-family: Courier New, monospace;
	color: #a01a7d;
	text-decoration: none;
	-webkit-transition: 1s;
	-webkit-transition-timing-function: ease;
}

.col_two_third table a:hover{
	color: #192bc2;
	text-decoration: none;
	padding-left:20px;	
}

/*th for table head*/
.col_two_third th{
	padding-left: 10px;
	background-color:#393d3f;
	color: #ffffff;
}

/*tr for table row*/
.col_two_third tr{
	height:50px;
	border-bottom:1px dotted #999999;
}

.col_two_third td{
	padding-left: 10px;
	background-color:#dadff7;	
}

It's time to check the result

Now open index.html file in browser
You can change the color, fonts etc. in css file