Tables In HTML How To Create And Add Bullets And Numbers In HTML

Last Updated on

HTML Symbol
In the past few articles I have discussed many things about HTML Coding, like Adding Images and Music, Creating Hyperlink and All That. In this Article I will Concentrate upon the following Two Topics i) How To Create list of Sentenses like Bullet and Numberings. and ii) How to Create a Table in HTML. If you don’t know anything about HTML then start learning as it’s very esy and it wouldn’t take so muxch time just visit my previous articles about HTML from the Start.
  • Now we shall proceed with our current article Topic. I will discuss about above mentioned two toipics in this article one by one. So just lets get started :

    How To Create Bullets and Numbering in HTML :

    Sometimes we need to add Bullets or need to add numberings to our texual content, most probably for describing a procedure step by step.This is also known as listing of texual content.In HTML we can do this kind of listings.Basically in HTML there are two different types of listing, one is Ordered Listing which consists of Numbers and the another one is Unordered Listing which consists of Bullets. As it’s already known to us that to perform each kind of task in HTML there are different typs of Tags to be used.I will now show you each type of Listing one by one.We must place the Listing Tags always in between the Font Tag (Between The <font color=”xyz” color=”abc”> and </font>) .
    Ordered Listing ====> The Ordered Listing means that each of the listed items will be ordered in Numerical Order like 1)   2)    3). . . . . The Tag used for Ordered Listing is <ol>, in the process of listing you don’t need to close any tag with / sign. The Tag <ol> only declair that the listing that takes place after the Tag will be in a Numerical manner. But we need to use another Tag that is <li> to list each Item. after the Order Listing Tag that is <ol> in a new line the first item is to be written with a <li> Tag before writing the item. Then in the next line starting with another <li> Tag we must write the second item and in the next line starting with another <li> Tag the third item is to be written and so on………
    Example :-      <ol>
                          <li> First Item/Point
                          <li> Second Item/Point
                          <li> Third Item/Point
    Unordered Listing ====> The Unordered Listing means that each of the listed Items or points will be ordered with Bullets. The Tag used for Unordered Listing is <ul> , and rest of the part is all same just like Ordered listing, thus to add Bullets before each Item you need to add the <li> before swriting each Items or points on new lines each.And here also no need to close the Tag with / sign.
    Example :-      <ul>
                          <li> First Item/Point
                          <li> Second Item/Point
                          <li> Third Item/Point
    We can use both the Ordered and Unorderd Listing one after another continuously.
    Example :-      <ol>
                          <li> First Item/Point
                          <li> Second Item/Point
                          <li> Third Item/Point
                          <li> First Item/Point
                          <li> Second Item/Point
                          <li> Third Item/Point
    We can create a webpage in HTML and also put this Type Of Listings There.
    Example :- 
    Test Page
    <body bgcolor=”Blue”>
    <img src=”D:HTML ProjectCodingProcessor 2.jpg” align=”right”/>
    <font color=”Green” size=”6″>
    <h1>HTML Power</h1>
    <font color=”Red” Size=”4″>
    <li>Mobile Phone
    <li>SIM Card
    <b><i><u>Hi I’m a Newbie to HTML and this is My first created Webpage</u></i></b><br>
    <i>I Like Using HTML to create my Own Webpage</i><br>
    <a href=”D:HTML ProjectCodingHardware.html”>Hardware</a>
    <bgsound src=”D:HTML ProjectCodingHome Page.mp3″ autostart=”true” hidden=”true” loop=”10″>

    Creating Table In HTML :

    In  Few cases it’s better and proper to show information in Tubuler Format. We can construct Tables in HTML for our Webpages. Creating table in HTML requires a lot of Hard Work and concentration as it you would have to write the same thing again and again with just a little modification in order to construct a Table. To get started we first need to know some Tags with their functions which we will need in order to Construct a Table in HTML. All Tags must be in between the Font Tags
    ·                     <table height=”##” width=”###” border=”#”>  ====> This Tag is used to create a table and to declair that you are going to construct a table, this Tag is written first. Here height, width, border means the height , width and border of the each cell of table.In places of ### , ## and # use proper number of size. The closing Tag is </table>
    ·                     <th> ====> This Tag is used to give the Table Headings, each Headings is given one after another in a new line starting with this Tag. The closing Tag is </th>
    ·                     <tr> ====> This Tag is used to declair that a new row is being Constructed. The closing Tag is </tr>
    ·                     <td> ====> This Tag is used to give the Table Data or the Data which are to filled with the cell under a table row. Each of the cell is declaired with data by starting each Data with <td> Tag and each cells data is written in a new line or one after another starting with <td> Tag. The Closing Tag is </td>

    Now we should understand the relation from the above that, Under a Table there first the Table Starting Tag needs to be given then we need to declair the Table Headings with Table Head Tag, After the Table Headings are done we need to create the first row of the table by Table Row Tag (<tr>) and the under this Table row we need to construct the each Cells under that row with Table Data Tag that is <td>, the number of cells in a row is equal to the number of Taable Headings given.After filling up all the Table Data Cells we need to close that first row with Closing Tag for Table Row (</tr>) then we have to create new rows as required by the above methode, and ultimately when all required rows are completed then we need to Comple the Construction of the Table by Closing the Table Tag that is </table> .
    Example :-     
    <table height=”1″ width=”1″ border=”2″>
    <th>Sl No.
    <th>Roll No.
    <th>% Marks
    <td>1</td><td>Ram</td><td>1st</td><td>Civil Engg.</td><td>25</td><td>71</td><td>Average</td>
    <td>2</td><td>Shyam</td><td>1st</td><td>Mech. Engg.</td><td>61</td><td>83</td><td>Very Good</td>
    <td>2</td><td>Jadhu</td><td>1st</td><td>Mech. Engg.</td><td>59</td><td>69</td><td>Average</td>
    <td>2</td><td>Madhu</td><td>1st</td><td>Elec. Engg.</td><td>31</td><td>79</td><td>Good</td>
    <td>2</td><td>Rohim</td><td>1st</td><td>Civil Engg.</td><td>35</td><td>83</td><td>Very Good</td>
    <td>2</td><td>Lakshman</td><td>1st</td><td>Civil. Engg.</td><td>45</td><td>69</td><td>Average</td>
    <td>2</td><td>Krishna</td><td>3rd</td><td>Mech. Engg.</td><td>01</td><td>85.64</td><td>Excelent</td>
    This above coding above with all required coding to create HTML file will show a Table like below :
    Table Created Using HTML

    I Hope this article Helped You. Please do leave Comment(s) for any Questions or Suggestions, Any Comment(s) will be highly appreciated.Have Goof Day.


Follow Techno Genome at :-

Add Comment

Concrete Technology Constructional Materials and Practices Geoinformatics Geotechnical Engineering Job & How To Structural Engineering Transportation Engineering Water Resources & Public Health Engineering
Temperature Controlling in Bituminous Road Construction
Concrete Strength and Importance of Water
Online Civil Engineering Tutorials
Concrete Testing Material Testing Soil Testing
Field Tests Of Building Materials
Concrete Cube Test To Determine Concrete Strength
Drying Oven
Water Absoption Test Of Bricks – Laboratory Method