CSS

HTML Tables


  • Tables are defined with the <table> tag.
  • Tables are divided into table rows with the <tr> tag.
  • Table rows are divided into table data with the <td> tag.
  • A table row can also be divided into table headings with the <th> tag.

An HTML Table with a Border Attribute If you do not specify a border for the table, it will be displayed without borders. A border can be added using the border attribute:

Example - 1
<!DOCTYPE html>
<html>
<body>

<table border="1" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

Output :

Jill Smith 50 Eve Jackson 94 John Doe 80

To add borders, use the CSS border property:

Example 2:
<!DOCTYPE html>
<html>
<head>

<style>
table,th,td{
    border: 1px solid black;
    border-collapse: collapse;
	padding: 5px;
	border: 1px solid black;
    border-collapse: collapse;
}
th {
	background-color :red;
                   color:white;
}
td {
	background-color :blue;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>Age</th>		
    <th>Salary</th>
  </tr>
  <tr>
    <td>XXX</td>
    <td>28</td>		
    <td>35,000</td>
  </tr>
  <tr>
    <td>YYY</td>
    <td>29</td>		
    <td>38,000</td>
  </tr>
  <tr>
    <td>ZZZ</td>
    <td>30</td>		
    <td>40,000</td>
  </tr>
</table>

</body>
</html>