DONATE  
MENU
JSON
JAVASCRIPT
HTML
CSS
AJAX
MYSQL
PHP

HTML Tutorials

INTRODUCTION

» Introduction to HTML

» PRACTICE IT Editor

» Getting Started

» HTML Example

» HTML Tags

» HTML Elements

» Nesting Tags

» Block & Inline Elements

» HTML Attributes

» HTML Comments

» File Paths

» HTML Entities & Symbols

TAGS/ELEMENTS

» Important Tags

» HTML Headings

» Text Formatting

» HTML Links

» HTML Lists

» HTML Tables

» HTML Images

» HTML Audios

» HTML Videos

» HTML Iframes

» HTML Styles

» HTML Scripts

» Semantic Elements

» HTML Metadata

ATTRIBUTES

» Elements' ID

» Elements' Class

» Elements' Style

» Element's Align

» Element's Height & Width

HTML FORMS

» HTML Forms

» Input Elements

» HTML Textarea

» HTML Select

HTML EXAMPLE

» Login Page

.. » HTML » Tags/elements » HTML Tables
Share Tweet WhatsApp

HTML Tables

HTML tables are used and useful in arranging data in tabular forms for easier comprehension or understanding of whatever messages such data are passing. EXAMPLE
IDNAMESALARY
SN/16/234Mr. Nahum Fidelis$3,000
SN/16/274Mrs. Prakesh Priyar$1,500
SN/17/434Mr. Orobo Kelvin$1,500
SN/19/144Mr. John Ogbe$1,000
Above is an example of an HTML table. With just a glance even by an illiterate, one will be able to deduce that the table contains names and amount due to such names. Therefore, tables are very important in conveying complex information that can be tablulated. Tables are made up of: 1. Rows or Records e.g
SN/19/144Mr. John Ogbe$1,000
2. Columns or Fields e.g
SALARY
$3,000
$1,500
$1,500
$1,000
The HTML <table> tag is used in defining a table element. Inside of it, we can nest numerous table rows using the <tr> tag. Inside the <tr> tag can we also nest numerous <td> or table data elements representing the individual data contained in a row. EXAMPLE
<table>
<tr><td>SN/152d/20</td><td>Dell Laptops</td></tr>
<tr><td>SN/256s/21</td><td>Windows Laptops</td></tr>
<tr><td>SN/268x/19</td><td>Toshiba Laptops</td><tr>
</table>

Copy PRACTICE IT

HTML TABLE - THE PROPER WAY Above is a simple HTML table but then, there is a more proper way to define tables in HTML. PROCEDURE 1. We first of all define our table with the <table> tag.
<table>
</table>
2. We add a caption or title if any using the <caption> tag.
<table>
<caption>EMPLOYEE'S SALARIES TABLE</caption>
</table>
3. We thereafter divide our table into table head and table body using the <thead> and <tbody> tag respectively.
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
4. Inside the <thead> tag, we give a heading or title to our individual columns using the <th> tag.
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>SALARY</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
The <tr> tag nested the <th> tags so as to ensure that all the individual table heads for the columns are in one row. 5. Inside the table body, you define your individual table rows <tr> containing various data <td> relating to each of the table heads <th> or columns.
<table>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>SALARY</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Grace Kamar</td><td>N1, 000, 000</td></tr>
<tr><td>3</td><td>Francis OkonKwo</td><td>900, 000</td></tr>
<tr><td>4</td><td>Julius Zuck</td><td>850, 000</td></tr>
</tbody>
</table>
EXAMPLE
<table>
<caption>EMPLOYEE'S SALARY TABLE</caption>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>SALARY</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Grace Kamar</td><td>N1, 000, 000</td></tr>
<tr><td>3</td><td>Francis OkonKwo</td><td>900, 000</td></tr>
<tr><td>4</td><td>Julius Zuck</td><td>850, 000</td></tr>
</tbody>
</table>

Copy PRACTICE IT

NOTE:
  • Do not worry as to why our table looks so different from the first example given,
    IDNAMESALARY
    SN/16/234Mr. Nahum Fidelis$3,000
    SN/16/274Mrs. Prakesh Priyar$1,500
    SN/17/434Mr. Orobo Kelvin$1,500
    SN/19/144Mr. John Ogbe$1,000
    By the time, you get familiar with CSS and CSS frameworks, you will be able to style your tables to look greater than that.
SUMMARY
  1. Tables are used to tabulate data for easier comprehension.
  2. HTML tables can be define with the <table> tag.
  3. Add a caption to a table using the <caption> tag.
  4. Each individual row in a table is defined with the <tr> tag.
  5. The body of an HTML table can be divided into two namely the table head <thead> and the table body <tbody>.
  6. Create individual headings for the various columns of a table using the <th> tag in table head.
  7. Create individual cells for the various columns of a table using the <td> tag in the table body.
Take a short quiz on HTML Tables.
Ask a question or tell us if HTML Tables is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode