Web Programming TutorialsLearn to implement tables and lists in Html

Learn to implement tables and lists in Html

In this tutorial we will learn how to design tables and lists in html,what are the tags related to it and how to implement them .

    To implement tables and lists in html follow the steps given below :

  1. First of all create a new folder for example Test.
  2. In this Test folder create another two folders and name them CSS and images respectively.
  3. In CSS folder create a text document and name it style.css
  4. Now if you want to use or add images in your html document then paste that images into the images folder
  5. Now open Notepad++ and write the following code in it and save your file as an html document in the same Test folder that we have created :

    
    
    <!DOCTYPE html>
    <html>
    	<head>
    	     <title>My First HTML Page!</title>
    	     <link rel="stylesheet" href="css/style.css" type="text/css" />
    	</head>
    	<body>
    	<div id="container">
    	<h1>Baseball Stats</h1>
    		<table>
    			<tr>
    				<th>Baseball Team</th>
    				<th>Game Wins</th>
    				<th>Game Loesses</th>
    				<th>Game Ties</th>
    			</tr>
    			<tr>
    				<td>Boston Red Sox</td>
    				<td>30</td>
    				<td>0</td>
    				<td>0</td>
    			</tr>
    			<tr>
    				<td>New York Yankees</td>
    				<td>0</td>
    				<td>29</td>
    				<td>1</td>
    			</tr>
    			<tr>
    				<td>Chicago Cubs</td>
    				<td>15</td>
    				<td>13</td>
    				<td>2</td>
    			</tr>
    			<tr>
    				<td>New York Mets</td>
    				<td>15</td>
    				<td>15</td>
    				<td>0</td>
    			</tr>
    		</table>
    		<br />
    		<br />
    		<h1> League Stats</h1>
    		<ol>
    			<li>Boston Red Sox</li>
    			<li>New York Mets</li>
    			<li>Chicago Cubs</li>
    			<li>New York Yankees</li>
    		</ol>
    		<br />
    		<br />
    		<h1> Other Sports</h1>
    		<ul>
    			<li>Basketball</li>
    			<li>Hockey</li>
    			<li>Football</li>
    			<li>Soccer</li>
    		</ul>
    	</div>
    	</body>
    </html>
    

    So now your Notepad++ window will look like as shown below :

  6. 1
    2
    3

  7. Now write the following code in the style.css file which have created in the CSS folder and save it.

    body{
    	 background-color:#f4f4f4;
    	 font-family:arial;
    	 font-size:14px;
        }
    
    
    #container{
    	width:460px;
    	margin:auto;
    	border:1px solid #cccccc;
    	padding: 0 20px 20px 20px;
    	border-radius:10px;
    	text-align:center;
    	background:#ffffff;
    	min-height:400px;
    }
    th,td{
    	   width:100px;
    	   text-align:center;
         }
    
    td{
    	border-bottom:1px #ccc dashed;
    	padding:3px 0;
      }
    
    li{
    	text-align:left;
      }
    
  8. Now run your file which you have created in Notepad++ and you will have following output:
  9. 4

  10. Thus we have implemented tables and lists in HTML.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -