Tutorials

  1. Home
  2. Tutorials
  3. HTML & CSS
  4. HTML TABLES
Image

HTML & CSS - HTML TABLES - HTML Table with a Border Attribute

HTML Table with a Border Attribute

If you want to add border to table then use border attribute . This is the first way to add the border in table and the second way is by using css.

EX 
<!DOCTYPE html>
<html>
<body>

<table border="1" style="width:100%">
  <tr>
    <td>C</td>
    <td>C++</td>		
    <td>java</td>
  </tr>
  <tr>
    <td>javascript</td>
    <td>Json</td>		
    <td>html</td>
  </tr>
  <tr>
    <td>css</td>
    <td>oracle</td>		
    <td>pl/sql</td>
  </tr>
</table>

</body>
</html>
O/P 
C		        C++		      java
javascript	Json	      html
css		       oracle	      pl/sql
Now we use the CSS border property for adding border in tabel: 
<!DOCTYPE>
<html>  
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
}  
</style>  
</head>
<body>  
<table>  
<tr><th>First_Name</th><th>Last_Name</th></tr>  
<tr><td>Ashish </td><td>Gadpayle</td></tr>  
<tr><td>Prashant</td><td>Jha</td></tr>  

</table>  
</body>
</html>
O/P

Now we collapse all the borders in one border by border collapse property. 
<html>  
<head>
<style>  
table, th, td {  
    border: 1px solid black;  
    border-collapse: collapse;  
}  
</style>  
</head>
<body>  
<table>  
<tr><th>Web programing</th><th>Dextop programing</th></tr>  
<tr><td>Html</td><td>java</td></tr>  
<tr><td>php</td><td>C#.NET</td></tr>  
</body>
</html>
O/P