HTML Tables

index<--

HTML Tables

HTML Table is a powerful composite element used to display data. The data is structured in rows and columns like in a database relational table. Sometimes tables are dynamically generated by back-end but most of the time the tables are static.

The elements used for a table:

<table> – table main element
<thead> – contains table header
<tbody> – define table body
<tr> – define one row
<th> – define one header cell
<td> – define one detail cell

Let's explore an example:

In the next example you can see the logical operations for a computer language. This table is called: Logical table of truth and is a basic thing you must grasp before starting to learn any programming language:

A	B	NOT A	NOT B	A AND B	A OR B
True	False	False	True	False	True
False	True	True	False	False	True
False	False	True	True	False	False
True	True	False	False	True	True

Here is the HTML code for the table above:

<table class="table table-bordered">
<thead>
 <tr>
   <th>A</th>
   <th>B</th>
   <th>NOT A</th>
   <th>NOT B</th>
   <th>A AND B</th>
   <th>A OR B</th>
 </tr>
</thead>
<tbody>
 <tr>
   <td>True</td>
   <td>False</td>
   <td>False</td>
   <td>True</td>
   <td>False</td>
   <td>True</td>
 </tr>
 <tr>
   <td>False</td>
   <td>True</td>
   <td>True</td>
   <td>False</td>
   <td>False</td>
   <td>True</td>
 </tr>
 <tr>
   <td>False</td>
   <td>False</td>
   <td>True</td>
   <td>True</td>
   <td>False</td>
   <td>False</td>
 </tr>
 <tr>
   <td>True</td>
   <td>True</td>
   <td>False</td>
   <td>False</td>
   <td>True</td>
   <td>True</td>
 </tr>
</tbody>
</table>

Notes:

Table elements are nested, but the indentation I have used above is optional,
The <table> element contains all other elements,
We separate the header and body of the table using <thead> and <tbody>,
We create one row for header and many other rows using <tr> tag,
Every table row has one or more cells. These are created using <td> tags,
The header is using <th> tag for table cells.

Congratulation! Now you know how to create a simple HTML table. For this particular table we have used attribute "class" to assign a style to the table. Therefore the aspect of this table is bordered.Of course, this website is using Bootstrap so the CSS classes are standard. We will explain later CSS and Bootstrap framework. Now please take at least one hour break and then continue with SS.

Aligned HTML

The HTML code for tables looks terrible. It is hard to add or remove a columns or even rows. If you work on a small table there is a trick you can use to make HTML look like a table. This technique is called: aligned HTML and is not yet very popular. It has disadvantage that for a larger table require switching from "word wrap" to "non wrap" mode before editing the table columns. Or use a very large screen.

Example:

This is believe it or not the same table as in previous example:

<table class="table table-bordered">
   <tr><th>A    </th><th>B    </th><th>NOT A</th><th>NOT B</th><th>A AND B</th><th>A OR B</th></tr>
   <tr><td>True </td><td>False</td><td>False</td><td>True </td><td>False  </td><td>True  </td></tr>
   <tr><td>False</td><td>True </td><td>True </td><td>False</td><td>False  </td><td>True  </td></tr>
   <tr><td>False</td><td>False</td><td>True </td><td>True </td><td>False  </td><td>False </td></tr>
   <tr><td>True </td><td>True </td><td>False</td><td>False</td><td>True   </td><td>True  </td></tr>
</table>

Note: A text editor usually has "column mode". If you use third mode, you can edit the table more easily. For example in Notepad++ to activate "column mode you press: Shift+Ctrl+Arrow-UP/DOWN. You can mark a bloc, cut/copy and paste. I use this mode all the time to improve my tables.

Read next: HTML Forms