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 :
- First of all create a new folder for example Test.
- In this Test folder create another two folders and name them CSS and images respectively.
- In CSS folder create a text document and name it style.css
- Now if you want to use or add images in your html document then paste that images into the images folder
- 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 :
- 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; }
- Now run your file which you have created in Notepad++ and you will have following output:
- Thus we have implemented tables and lists in HTML.