How to create table in HTML with example

bySUCCESS BETA •February 27, 2022

0

Create Table in HTML with example

In this article, we discuss How to create table in HTML with example. A table is a collection of data arranged by rows and columns. Tables are very useful for demonstrating connections between data types, such as products and their costs, employment and planned dates, or flights and arrival times. In this article, you will learn how to create a table using HTML for example, customize it by adding the desired number of rows and columns, and add rows and columns headings to create your table easier to read.

What is a Table in HTML?

A table is a manifestation of data organized in rows and columns. It's more like a spreadsheet. In HTML, with the help of tables, you can categorize data into rows and columns of cells like images, text, URLs, etc.

The use of HTML tables on the web has become more popular recently because the awesome HTML table tags make them comfortable to create and design.

You have just used tags to create tables in HTML Code. The most significant is the <table> tag which is the primary container of the table. It displays where the table will start and end.

Creating tables in HTML

HTML tables allow you to sort data in rows and columns. These are most commonly used to display tabular data such as product listings, financial statements, customer details, etc.

You can create a table utilising the <table> element. Inside the <td> feature, you can use <tr> features to create rows, and you can utilise <td> elements to create columns within a row. You can designate a cell as a title for a class of table cells using the <th> element.

The following sample shows the most basic structure of a table.

<table class="MyHTML_Table">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>{codeBox}

By default, the table has no limitations. You can use the CSS border property to count borders to the table. Furthermore, the table cells are extensive enough to fit the ranges by default. You can use the CSS padding component to add better space around the tablespace content.

The next style rules add a 1-pixel border to the table and a 10-pixel padding to its cells.

<style>
.MyHTML_Table {
border:3px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
}
.MyHTML_Table th {
border:3px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.MyHTML_Table td {
border:3px solid #C0C0C0;
padding:5px;
}
</style>{codeBox}

Add a caption to the table

You may specify a caption for your table by using the <caption> HTML Tag. The <caption> tag should be placed immediately after the opening <table> tag. By default, the caption shows up at the top of the table, but you may change its position utilizing the CSS caption-side property.

The following example shows the best way how to use this tag element in a table.

<table class="MyHTML_Table">
<caption>My HTML Table</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>{codeBox}

Generate HTML Table Online

You can too use a free online HTML Table Generator like HTML Table Generator - HTMLTable.Org. To use this tool:

First Go To HTMLTable.Org Then
Enter No. of Rows And Columns
After that, you may choose header colour, background colour and text colour.
then click on Generate button.

Tags: create table in HTML How to create table in HTML

*