Tables

  • Like in word processors, web pages at many times need to contain and display tabular data.
  • A table consists of a set of rows, columns, column headings, and cells.
  • Let’s start by a simple example:

 

   
<!doctype html>   
<html>
<body>
    <h1>Front-End Web Technologies</h1>
    <p>Front End Web development  Technologies, became more advanced, 
    and feature rich technologies.</p>
    <p>The following table shows some of  the most important technologies:</p>

    <table border="1" width="500">
        <tr>
            <th>Technology</th>
            <th>Name</th>
            <th>Description</th>
        </tr>
        <tr>
            <td>HTML</td>
            <td>Hyper Text  Markup Language</td>
            <td>The main  language used for authoring web pages.</td>
        </tr>
        <tr>
            <td>CSS</td>
            <td>Cascading  Style Sheet</td>
            <td>Used to  define styles for different HTML tags and set of HTML tags</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>JavaScript</td>
            <td>Used to add  dynamic processing of web pages, like dealing with events, 
            and different HTML page components at the  run-time</td>
        </tr>
        <tr>
            <td>JQuery</td>
            <td>JavaScript  Query</td>
            <td>An excellent  library of JavaScript, that can speed up front-end development,
            and help the developer more  efficiently add features, 
            functions, and interactivity.</td>
        </tr>
    </table>
</body>
</html> 

 

  • The table HTML code started with the <table> tag, with attributes to display a border and define a width.
  • Then the <tr> tag is used repeatedly to display table rows.
  • In the first table row tag (<tr>), we placed the table headers wrap each with a <th> tag.
  • In this table we needed three columns, this is why we used the <th> tag three times.
  • For the second row and so forth, we used the <td> tag to wrap each table cell, and again we used only 3 <td> tags per row, because we have only 3 columns.
  • Tables can be styled in many shapes using the css techniques.