You must have seen tables based data on different web sites. Especially the sports team’s score, profile, schedule, stock market account etc. takes place in the table. To show table-based data, there are several tags of HTML that can be used to create different types of tables. To create a table, initially takes 3 tags

1. <table> </ table>

2. <tr> </ tr> (tr in table row)

3. <td> </ td> (table data on td)

You can create a table with these 3 tags. The whole grid system can be made. With row and column

Tr is made with row or row and td is called column or pillar. A simple table

<table>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>

</tr>
</table>

Display:

HTML JS SQL
CSS PHP MySQL

 

I used two lines of row and 3 columns, you can use the row you want.

 

Table title

There is a tag named <th> This table headers can be made as such

<table>
<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>

</table>

Display:

Markup Programming Database
HTML JS SQL
CSS PHP MySQL

See elements of Elements in the form of headings.

However, the table rules are the table headers, bodies and footers. There are some tags for this, if they are used, the graphic table is correct, for example

<table>
<thead>

<tr>
<th>Markup</th>
<th>Programming</th>
<th>Database</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Easy</td>
<td>Tough</td>
<td>Tough</td>
</tr>

</tfoot>
<tbody>

<tr>
<td>HTML</td>
<td>JS</td>
<td>SQL</td>
</tr>
<tr>
<td>CSS</td>
<td>PHP</td>
<td>MySQL</td>
</tr>
</tbody>

</table>

Display:

Markup Programming Database
Easy Tough Tough
HTML JS SQL
CSS PHP MySQL

<tfoot> The tag has been given before <tbody>, and thus the browser can show correctly. (See tread data below)

 

The tables on the table above do not look good, because the table elements have several attributes, the table is beautifully arranged. For example, if you want to make a border in the table, table will be somewhat nice, as it will be somewhat beautiful. Cellpadding and cellspacing can be done by inserting the padding (distance between the contents of the border) and the distance between the cells or the sides, respectively, such as the <table border = “1” cellpadding = “10”> It can be added to our online editor by adding it.

 

rowspan and colspan

A complex type of table can be made using two rowspan and colspan attributes in td, th. With the rowspan’s numerical value, the cell can be equal to the row, as such

<table border="1">
<tr>
<th rowspan="2">Web Language</th>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>PHP</td>
<td>JS</td>
</tr>
<tr>
<th>Framework</th>
<td>CI</td>
<td>Bootstrap</td>
</tr>
</table>

Display:

Web Language HTML CSS
PHP JS
Framework CI Bootstrap

Do not look carefully at where th, td etc., otherwise you will not understand anything. See how the two row’s place has been grabbed by a web page, with rowspan.

Columns can be grabbed by columns, as shown in the table above the T in the Tough two columns which is unnecessary, if you wish, using a colspan, you can make a column equal to the two. For example, let’s line the following line by replacing the 13

<td colspan="2"></td>

Run the diameter and see that it has been done in a column.

** You can place any HTML element inside a cell (inside td). img, p or anything.

** Important attributes are discussed only, in addition to these, common attributes like align, bgcolor etc. can be used.