HTML Tables

By | January 6, 2020

There are many pages of web pages and data that we have to show in the form of tables for which there is an element in HTML by which we can easily create tables. HTML table tag are used to display array bad data. Use <table> tag to create a table of HTML and use <tr> tag for row in it. Inside table table <th> tag is used for table heading <td> tags are used for table data. There is a <thead> tag inside the table, in which the data in the table is heading. <tbody> The body of the table data comes inside the tag <tfoot> The footer content of the table data comes inside the tag. The <caption> tag defines the table’s caption. The<colgroup> tag defines one or more columns of the table.

Example:-

<table>
<thead>
	<tr>
		<th>First Name</th>
		<th>Second Name</th>
		<th>Third Name</th>
	</tr>
</thead>

<tbody>
	<tr>
		<td>1000</td>
		<td>1000</td>
		<td>1000</td>
	</tr>
</tbody>

<tfoot>
    <tr>
    	<td>Table Foot 1</td>
    	<td>Table Foot 2</td>
    	<td>Table Foot 3</td>
    </tr>
</tfoot>

</table>

Output:-

table image

CSS of the HTML Table we will do something like this.

<table border="1">

	<tr>
		<th>First Name</th>
		<th>Second Name</th>
		<th>Third Name</th>
	</tr>

	<tr>
		<td>1000</td>
		<td>1000</td>
		<td>1000</td>

    <tr>
    	<td>Table Foot 1</td>
    	<td>Table Foot 2</td>
    	<td>Table Foot 3</td>
    </tr>


</table>

Output:-

table2

Using CSS we can do something like this.

<style>
	table,th,td{
			border: 2px solid red;
	}
</style>

<table>

	<tr>
		<th>First Name</th>
		<th>Second Name</th>
		<th>Third Name</th>
	</tr>

	<tr>
		<td>1000</td>
		<td>1000</td>
		<td>1000</td>

    <tr>
    	<td>Table Foot 1</td>
    	<td>Table Foot 2</td>
    	<td>Table Foot 3</td>
    </tr>


</table>

Output:-

red table

We can manage the extra border of the table which comes in the form of default with the property of css.

<style>
	table,th,td{
			border: 2px solid red;
			border-collapse: collapse;
	}
</style>

<table>

	<tr>
		<th>First Name</th>
		<th>Second Name</th>
		<th>Third Name</th>
	</tr>

	<tr>
		<td>1000</td>
		<td>1000</td>
		<td>1000</td>

    <tr>
    	<td>Table Foot 1</td>
    	<td>Table Foot 2</td>
    	<td>Table Foot 3</td>
    </tr>


</table>

Output:-

HTML Table Width:-

<style>
	table{
			width: 100%;
			border-collapse: collapse;
	}
	th,td{
		border:1px solid black;
		padding: 20px;
	}
</style>

<table>

	<tr>
		<th>First Name</th>
		<th>Second Name</th>
		<th>Third Name</th>
	</tr>

	<tr>
		<td>1000</td>
		<td>1000</td>
		<td>1000</td>

    <tr>
    	<td>Table Foot 1</td>
    	<td>Table Foot 2</td>
    	<td>Table Foot 3</td>
    </tr>


</table>

Output:-

table heading

HTML Table colspan:-

In a sit-down table, use a clasp to add column to merge.


<style>
	table,th,td{
		border:1px solid #000;
		border-collapse: collapse;
	}
</style>

<table>

	<tr>
		<th>Name</th>
		<th colspan="2">Mobile No.</th>
	</tr>

	<tr>
		<td>Rohit</td>
		<td>9836884412</td>
		<td>9836674413</td>

</table>

Output:-

table

HTML Table With rowspan:-

<style>
	table,th,td{
		border:1px solid #000;
		border-collapse: collapse;
	}
	th,td{
		padding:20px;
	}
</style>

<table>
	<tr>
		<th>Name</th>
		<td>Rohit</td>
	</tr>
	<tr>
		<th rowspan="2">Mobile No</th>
		<td>9836884412</td>
    </tr>
    <tr>
    	<td>9836674413</td>
    </tr>
</table>

Output:-

table for row
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *