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 107

Hello and welcome back to this series of tutorials for beginners in web development. So far we have a simple html page and a css file linked to it. We begin this tutorial by creating new html and css files, in the same folder as where my_site.html is located. We shall call them index.html and index.css respectively. Done? Great! Link the two files together , by opening up index.html in your text editor (e.g. Sublime Text) and typing the following code below the closing title tag  </title>  and before the closing head tag </head> :               <link rel="stylesheet" type="text/css" href="index.css"> Inside the body of your html (i.e after <body> and before </body>),  type the following html code :              <p> This is a paragraph </p>              <p> This is a second paragraph </p>              <p> This is a third paragraph </p> Save your index.html file. Then open the
Post a Comment
Read more

HTML BASICS : CLASS 109 part I

Hello and welcome back to this tutorial series for beginners in web development. This class introduces the html 'div' tag and form elements. Let's begin by learning about the html 'div' tag. " div " stands for division . It allows you to group and separate content into different sections . Consider the image below. The image above shows a common layout (way of arranging elements)  for many web pages. It consists of;  a top area called the header, where most sites place a logo and site name as well as navigation links (links to other parts of the website)  a bottom area called the footer, where most sites place contact information and social media links. a side bar, which can be on the right side or left side. Some sites have two side bars, one on each side. and a main content area, where the main content of the page is displayed. For example. This blog site has a header at the top. It contains the name of the site 'In Relatable Te
Post a Comment
Read more

HTML BASICS : TEST YOURSELF

Hello and welcome back. Test your knowledge of the concepts we have learnt so far, by creating a website that looks as seen in images the below, before continuing with the next part.   Click on each image to zoom in (or better yet, save them in your pc). You can get the image used by clicking here . As always, if you have any questions / comments, leave them in the comment section below.
Post a Comment
Read more