How To Create Simple HTML Table

---

Today's lesson is one How to create Simple HTML Table. First i'm going to explain what each tag is and what they do.


<Table> Element
This element is necessary to indicate to the web browser that you wish to arrange content in a tabular fashion.

This element can also be use to place graphic on a page, to format text and input boxes just like DsiPaint login system.


Table Row <tr> Element
This element defines the table cell or each individual space for your content within a row.


Table Header <th>
Now i know lot of us does not use this following element but it useful for create a table.

This element makes your contents between the tag as Table head title for each colum.


Scope in th element
Some of you might have heard of this attribute. This is used in the th element to tell the screen reader that th content is the title for a column or a row.
We only used this in a th element



thead,tbody, and tfoot element
This is used in a complex table. These define the table's header body and footer respectively; however using then can not only structure the content for the coder's sake, but also browser and other devices.


Colspan
This attribute specifies how many cell colums of the table cell should span.


Align
This is use to put cell data to left, right or center alignment.


There more to explain for example,

- Cell spacing
- Cell Padding
- BorderColor
- BorderColorLight
- BorderColorDark
- Rowspan
(and more)


But we are not going to go over them. We are going to stick with the basics for today.


Now that we learn some of the element's for creating a table we going to get it the good stuffs CODING!!!. This table is going to have example of total members from Dsipaint and DsiRealm.

---

First is <table> element
<table border="3px">

Next we going to uses <thead> element
<thead>

Third we need to code th element with attribute scope in th element.
<tr>
<th scope="col">Site</th>
<th scope="col">Members</th>
</tr>

---

So far we should have this
<table border="3px">
<thead>
<tr>
<th scope="col">Site</th>
<th scope="col">Members</th>
</tr>
</thead>


Moving on next we need to code <tfoot> element with our total score in the <tfoot> element. example,

<tfoot>
<tr>
<td colspan="4">Total</td><td colspan="2" align="right">1032</td>
</tr>


Last is tbody we need to code total amount of members for each site. example,


<tbody>
<tr>
<th scope="row">Dsipaint</th>
<td>1000</td>
</tr>
<tr>
<th scope="row">DsiRealms</th>
<td>32</td>
</tr>
</table>

---

The full script of html code should look like this.


<table border="3px">
<thead>
<tr>

<th scope="col">Site</th>
<th scope="col">Members</th>



</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">Total</td>
<td colspan="2" align="right">1032</td>
</tr>


<tbody>
<tr>
<th scope="row">Dsipaint</th>
<td>1000</td>
</tr>

<tr>
<th scope="row">DsiRealms</th>
<td>32</td>
</tr>

</table>

---

Here is a screenshot i took.

---

Will that all for this week hope this tour was helpful for some of you guys.

Please +1 this it mean alot to me