How to create a table in HTML. It’s very simple, all you need is a little bit of HTML. And some information should also be of CSS.
Contents
Make Table With the Help of HTML and CSS
Much better tables can be created with the help of HTML and CSS. We use HTML to create a structure of a table. And we use CSS for designing. If there is little knowledge about HTML and CSS, then we can make very good tables. We use tables to better explain information to users. With the help of tables, we can handle big data easily.
A table is a group of rows and columns. In Html (HyperText Markup Language), we need the outer part of the table, the column of the table, and the rows of the table to create a table.
We use this table tag to create the outer part of the table.:
<table>Table body</table>
We use this table tag to create a heading in a table:
<th>Table heading</th>
We use this table tag to create columns in a table.:
<td>Table column</td>
We use this table tag to create a row in a table:
<tr>Table row</tr>
Code of the Table
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>how to make a table in html</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>
<body>
<table width="859" height="182" border="2" align="center" style="border-collapse:collapse;" >
<tr>
<th height="34" bordercolor="#666666" bgcolor="#99CCCC" scope="col">S.R</th>
<th bordercolor="#666666" bgcolor="#99CCCC" scope="col">Name</th>
<th bordercolor="#666666" bgcolor="#99CCCC" scope="col">Address</th>
<th bordercolor="#666666" bgcolor="#99CCCC" scope="col">Number</th>
<th bordercolor="#666666" bgcolor="#99CCCC" scope="col">Country</th>
</tr>
<tr>
<td bordercolor="#666666" bgcolor="#99FF00"><div align="center" class="style1">1</div></td>
<td bordercolor="#666666" bgcolor="#99CC00"><div align="center" class="style1">John</div></td>
<td bordercolor="#666666" bgcolor="#999900"><div align="center" class="style1">California</div></td>
<td bordercolor="#666666" bgcolor="#993300"><div align="center" class="style1">745845</div></td>
<td bordercolor="#666666" bgcolor="#990000"><div align="center" class="style1">USA</div></td>
</tr>
<tr>
<td bordercolor="#666666" bgcolor="#99FF00"><div align="center" class="style1">2</div></td>
<td bordercolor="#666666" bgcolor="#99CC00"><div align="center" class="style1">Dain</div></td>
<td bordercolor="#666666" bgcolor="#999900"><div align="center" class="style1">Barlin</div></td>
<td bordercolor="#666666" bgcolor="#993300"><div align="center" class="style1">514254</div></td>
<td bordercolor="#666666" bgcolor="#990000"><div align="center" class="style1">Germany</div></td>
</tr>
<tr>
<td bordercolor="#666666" bgcolor="#99FF00"><div align="center" class="style1">3</div></td>
<td bordercolor="#666666" bgcolor="#99CC00"><div align="center" class="style1">Que</div></td>
<td bordercolor="#666666" bgcolor="#999900"><div align="center" class="style1">New Delhi</div></td>
<td bordercolor="#666666" bgcolor="#993300"><div align="center" class="style1">854874</div></td>
<td bordercolor="#666666" bgcolor="#990000"><div align="center" class="style1">India</div></td>
</tr>
<tr>
<td bordercolor="#666666" bgcolor="#99FF00"><div align="center" class="style1">4</div></td>
<td bordercolor="#666666" bgcolor="#99CC00"><div align="center" class="style1">Tesla</div></td>
<td bordercolor="#666666" bgcolor="#999900"><div align="center" class="style1">Karanchi</div></td>
<td bordercolor="#666666" bgcolor="#993300"><div align="center" class="style1">658243</div></td>
<td bordercolor="#666666" bgcolor="#990000"><div align="center" class="style1">Pakistan</div></td>
</tr>
<tr>
<td bordercolor="#666666" bgcolor="#99FF00"><div align="center" class="style1">5</div></td>
<td bordercolor="#666666" bgcolor="#99CC00"><div align="center" class="style1">Neil</div></td>
<td bordercolor="#666666" bgcolor="#999900"><div align="center" class="style1">Dhaka</div></td>
<td bordercolor="#666666" bgcolor="#993300"><div align="center" class="style1">658489</div></td>
<td bordercolor="#666666" bgcolor="#990000"><div align="center" class="style1">Bangladesh</div></td>
</tr>
</table>
</body>
</html>
Output of the Table:
| S.R | Name | Address | Number | Country |
|---|---|---|---|---|
|
1
|
John
|
California
|
745845
|
USA
|
|
2
|
Dain
|
Berlin
|
514254
|
Germany
|
|
3
|
Que
|
New Delhi
|
854874
|
India
|
|
4
|
Tesla
|
Karachi
|
658243
|
Pakistan
|
|
5
|
Neil
|
Dhaka
|
658489
|
Bangladesh
|
We use CSS for better design in tables. With the help of CSS, we can create very effective tables.
In the output of the table, you will see five rows and five columns, showing some data. At the top of the table, you see the table headings. We have given different background colors to each column, which makes it easier to understand the dimensions of the table. We have kept the color of the table font white.