Skip to main content

HTML BASICS : CLASS 103

Hello and welcome to the third in a series of beginner level classes for web developers.
In the previous lesson (see here), we learned about the paragraph and list tags.
At this point the code in your my_site.html file should look like this:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h2>NASA | JPL</h2>
    <h1>ON A MISSION</h1>
    <h4>PODCAST</h4>

    <p>A new podcast from NASA</p>

    <ul>
        <li>Arrival</li>
        <li>We Are the World</li>
        <li>Worlds of Wonder</li>
    </ul>

     <ol>
        <li>NASA is cool</li>
        <li>Coding comes second, arguably.</li>
        <li>What is third place?!</li>
    </ol>

   
</body>
</html> 

This lesson introduces tables.  Tables offer a way for you (as a web developer) to arrange items in rows and columns.
For example, consider the following data arranged in table format (rows and columns);

NameTitle
John DoeTutor
Jane DoeStudent

The table above has three rows (horizontal entries) and two columns (vertical entries).
The first row provides the headings of the table, in this case, Name and Title.
The next two rows consist of actual data (information) about two individuals, John and Jane.

  1. In html, data can be displayed in table form using the table tag.
  2. The table tag opens with a <table> and closes with a </table>.
  3. Inside the table, rows are specified using <tr> (opening) and </tr> (closing) tags, where tr stands for table row.
  4. Inside each row, columns are specified using <td> (opening) and </td> (closing) tags, where td stands for table data.
  5. However, to specify a heading for your table, the tags <th> (opening) and </th> (closing) are used, where th stands for table heading.
This is probably confusing, so lets use the table above as an example. To display the above table using html, open up my_site.html and under the ordered list, insert the following code:

<table>
    <tr>    <th >Name</th>          <th >Title</th>         </tr>
    <tr>    <td >John Doe</td>    <td >Tutor</td>       </tr>
    <tr>    <td >Jane Doe</td>    <td >Student</td>    </tr>
</table>

Again, a table starts with an opening table tag i.e. <table> and is closed at the end with a closing table tag </table>.
We have three rows here, each row starts with a  opening row tag <tr> and ends with a closing row tag </tr>.
Inside each row, is where we specify the data (or column value) using the opening table data tag <td> and the closing table data tag </td>.
If the data is a heading, instead of <td></td> tags, <th> and </th> tags are used.

  • Save the file and then open it in your browser. Notice how the table is displayed. 
  • Note that no borders will be shown on your table (Adding borders is a topic for another day).
  • For now,  as an exercise, try displaying the following table (ignore the borders). 

NameTitleAge
John DoeTutor27
Jane DoeStudent22


Have fun!
As always, here is a video you can use to follow up and if you have any questions/comments, leave them in the comment section below.

Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
Post a Comment
Read more

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
Post a Comment
Read more

HTML BASICS : CLASS 102

Hello and welcome back. This is the second class in a series of tutorials for beginners in web development. You can access the first one here. By this point you should have a file named my_site.html with the following code in it: <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h4>NASA | JPL</h4>     <h1>ON A MISSION</h1>     <h2>PODCAST</h2> </body> </html> Great! It is a bit weird having a couple of headings with no further details, isn't it? Let us add some more text that explains what this whole 'NASA ON A MISSION PODCAST' stuff is about. For this we will use a different tag, the paragraph tag which opens with ' <p> ' and closes with a ' </p> ' .  After the bottom heading, type the following :  <p>A new podcast from NASA</p> Cli...
Post a Comment
Read more