Table tag in HTML with online editor

Tables are very useful to arrange in HTML and they are used very frequently by almost all web developers. HTML Tables are just like spreadsheets and they are made up of rows and columns.
You will create a table in HTML/XHTML by using <table> tag. Inside <table> element the table is written out row by row. A row is contained inside a <tr> tag, Which stands for table row. And each cell is then written inside the row element using a <td> tag, which stands for table data.

Example:

<html>
<head>
<title>Table tag in HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>abc</td>
<td>def</td>
</tr>
<tr>
<td>pqr</td>
<td>xyz</td>
</tr>
</table>
</body>
</html>

This will produce the following output:

abc	def
pqr	xyz

1. Table Heading – The <th> Element ( HTML Tables )

Table heading can be defined using <th> element. This tag will be put to replace the <td> tag which is used to represent actual data. Normally you will put your top row as a table heading as shown below, otherwise, you can use <th> element at any place:

<html>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>Deepan anand</td>
<td>MCA</td>
</tr>
<tr>
<td>Rajnish</td>
<td>M.A</td>
</tr>
</table>
</body>
</html>

2. table rows – The <tr> Element

This is HTML Tables Element which is used to make the row for the Table as we know that a table contains rows and columns. Have a look at the following code for the HTML roes ( i.e <tr> tag ). The lines highlighted are using the <tr> tag in the code

<html>
<head>
<title>This is page with table example.</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>Deepan anand</td>
<td>MCA</td>
</tr>
<tr>
<td>Rajnish</td>
<td>M.A</td>
</tr>
</table>
</body>
</html>

3. Table Data – The <td> Element

After we know about the <tr> tag, we have to know about the <td> tag which is used to make the columns in the tables. you can use the above example to understand the <td> tag.

You can also use the CSS for HTML tags from this link click here to learn CSS

Here is the complete code for a good HTML Tables example

Try it

<html>
<head>
<title>This is page with table example.</title>
</head>
<body>
<table border="1">
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll number</th>
<th>Gendar</th>
</tr>
<tr>
<td>Deepan anand</td>
<td>MCA</td>
<td>1</td>
<td>Male</td>
</tr>
<tr>
<td>Rajnish</td>
<td>M.A</td>
<td>2</td>
<td>Female</td>
</tr>
<tr>
<td>Kamal</td>
<td>M.com</td>
<td>3</td>
<td>Male</td>
</tr>
<tr>
<td>Poonam</td>
<td>phd</td>
<td>4</td>
<td>Female</td>
</tr>
</table>
</body>
</html>