Learn web development 05 - All About Tables in HTML and HTML Divs, Spans, Headers, Footers, Navs.

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about tables in HTML and also learn about html Divs, Spans, Headers, Footers, Navs.

Today's article is the last article on web development HTML Series. From tomorrow we'll learn about CSS.

Tables

We all know what table is and what the purpose of table is. So, lets see how can we make table in in our webpage.

Table tag

<table></table>
Table tag is used to create table in the page.

<table>
</table>

Output -
Well, we'll not see anything because our table is empty.

So we know table consists of two things rows and column, right?
So once we have made our table, then we need to create rows and columns.

tr tag

<tr></tr>
This is knows as table row tag. And yes, this is used to create rows inside table.

<table>
    <tr>

    </tr>
</table>

td tag

<td></td>
This is known as table data. This is used to create data inside rows. You can create any number of data inside rows. Each data represent single column.

table>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</table>

Now, as we added data inside our table. We can see output.

Output

It doesn't look like a table. Does it ?

To make this look like table use border attribute in table tag.

<table border>
    <tr>
        <td>data 1</td>
        <td>data 2</td>
        <td>data 3</td>
        <td>data 4</td>
    </tr>
</table>

Output

So that's how we create table in the page.

Divs, Headers, Footers, Spans, Navs

Div

<div></div>

This tag defines a division or a section in an HTML document. You can put anything inside this element images, text, forms anything. This is used as a wrapper for other element.

<div>
  <h2>This is a heading.</h2>
</div>

<div>
  <img src="image.png" alt="image inside div">
</div>

Header

<header></header>

This tag is same as <div></div>. The only difference is that we use <header></header> for creating header section. You can use this tag in place of div but generally this tag purpose is to create wrapper for header section.

<header>
  <h1>Welcome, to home page</h1>
  <p>This is a paragraph inside a header element</p>
</header>

Footer

<footer></footer>

This is also the same as <div>. But, it generally use to wrap footer elements or to create a footer in the page.

<footer>
  <a href="/">logo</a>
  <ul>
    <li>Home</li>
    <li>Project</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</footer>

<nav> tag is also same as div. It is used to create navbar for the page.

Span

<span></span>
This is used to mark a part of a document or part of a text.
Span tag is like div but the difference is span tag is used to create inline element whereas div is used to create block element. Example

<p>This is a text with<span> span </span>tag in it.</p>

So, that's sit about Tables and divs. I hope you understood each and everything. If you have any doubt feel free to ask me in comments.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Youtube Clone

Thanks For reading.