Create A Html Table | Html Table Css White Border – Codewithrandom
.png "Create A Html Table | Html Table Css White Border - Codewithrandom")
How to create a table in HTML ? This is a question asked by many developers who are new to web developement they want to use table to visualize some data and show it correctly but they don’t know how to create a table ?😕😕
By the end of this blog after reading, you can answer the question that How to use Table in HTML and How to implement it and also the measures taken while applying this property and also we will discuss how to style the table ? We will learn it through examples and codes so that it will be easy to visualize.Let’s get started—
Hey Learners,
Are you confused which type of table we are talking about of?
Ya you got it right we are going to create this table of data not the one on which you can put books,pens,etc.
HTML Table:-
1.Firstly we will start with the semantic tag Table.(<table>–</table>) .
2.Inside this tag the content is written.Inside the table tag,We use <tr>–</tr>tag which represents the table row same row contents are written inside this tag.
3.Inside the <tr> tag two tags are used when we want to write the table heading then we use <th> tag and we want to write simple entries then we use <td> tag for the columns.
HTML CODE FOR THE TABLE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Rollno</th>
</tr>
<tr>
<td>1</td>
<td>Heria</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Nikitan</td>
<td>56</td>
</tr>
<tr>
<td>3</td>
<td>Nora</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Rollno</th>
</tr>
<tr>
<td>1</td>
<td>Heria</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Nikitan</td>
<td>56</td>
</tr>
<tr>
<td>3</td>
<td>Nora</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:-
CSS CODE FOR THE TABLE:-
As you can see in the above picture that is output after writing the Html for the table.It is not looking good so it needs styling.
I have used some basic concepts of styling for styling the table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<th>S.no</th>
<th>Name</th>
<th>Rollno</th>
</tr>
<tr>
<td>1</td>
<td>Heria</td>
<td>8</td>
</tr>
<tr>
<td>2</td>
<td>Nikitan</td>
<td>56</td>
</tr>
<tr>
<td>3</td>
<td>Nora</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Output:-
For Output I have linked the live server of the table :-
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.
