Scribd
Upload
5 views

A basic HTML table

The document provides examples of how to create and style HTML tables using CSS properties such as border, border-radius, and border-color. It includes various table structures with headers and data, demonstrating different border styles and cell padding. Additionally, it offers tips for customizing table appearance and layout.

Uploaded by

Abdul Hafeez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

A basic HTML table

The document provides examples of how to create and style HTML tables using CSS properties such as border, border-radius, and border-color. It includes various table structures with headers and data, demonstrating different border styles and cell padding. Additionally, it offers tips for customizing table appearance and layout.

Uploaded by

Abdul Hafeez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

1

A basic HTML table <p>Use the CSS border property to add <tr>
<!DOCTYPE html> a border to the table.</p> <th>Firstname</th>
<html> <table style="width:100%"> <th>Lastname</th>
<style> <tr> <th>Age</th>
table, th, td { <th>Firstname</th> </tr>
border:1px solid black; <th>Lastname</th> <tr>
} <th>Age</th> <td>Jill</td>
</style> </tr> <td>Smith</td>
<body> <tr> <td>50</td>
<h2>A basic HTML table</h2> <td>Jill</td> </tr>
<table style="width:100%"> <td>Smith</td> <tr>
<tr> <td>50</td> <td>Eve</td>
<th>Company</th> </tr> <td>Jackson</td>
<th>Contact</th> <tr> <td>94</td>
<th>Country</th> <td>Eve</td> </tr>
</tr> <td>Jackson</td> <tr>
<tr> <td>94</td> <td>John</td>
<td>Alfreds Futterkiste</td> </tr> <td>Doe</td>
<td>Maria Anders</td> <tr> <td>80</td>
<td>Germany</td> <td>John</td> </tr>
</tr> <td>Doe</td> </table>
<tr> <td>80</td> </body>
<td>Centro comercial </tr> </html>
Moctezuma</td> </table> Border Style
<td>Francisco Chang</td> </body> <!DOCTYPE html>
<td>Mexico</td> </html> <html>
</tr> Round Border <head>
</table> <!DOCTYPE html> <style>
<p>To understand the example better, <html> th, td {
we have added borders to the <head> border-style: dotted;
table.</p> <style> }
</body> table, th, td { </style>
</html> border: 1px solid black; </head>
Add Border to table border-radius: 10px; <body>
<!DOCTYPE html> }
<html> </style> <h2>Table With Dotted Borders</h2>
<head> </head> <p>Use the CSS border-style property
<style> <body> to set the style of the borders.</p>
table, th, td { <h2>Table With Rounded <table style="width:100%">
border: 1px solid black; Borders</h2> <tr>
} <p>Use the CSS border-radius property <th>Firstname</th>
</style> to add rounded corners to the <th>Lastname</th>
</head> borders.</p> <th>Age</th>
<body> <table style="width:100%"> </tr>
<h2>Table With Border</h2>
2

<tr> <h2>Table With Border <p>Cell padding specifies the space


<td>Jill</td> Color</h2> between the cell content and its
<td>Smith</td> borders.</p>
<p>Use the CSS border-
<td>50</td> <table style="width:100%">
color property to set the
</tr> color of the borders.</p> <tr>
<tr> <table <th>Firstname</th>
<td>Eve</td> style="width:100%"> <th>Lastname</th>
<td>Jackson</td> <tr> <th>Age</th>
<td>94</td> <th>Firstname</th> </tr>
</tr> <th>Lastname</th> <tr>
<th>Age</th>
<tr> <td>Jill</td>
</tr>
<td>John</td> <tr> <td>Smith</td>
<td>Doe</td> <td>Jill</td> <td>50</td>
<td>80</td> <td>Smith</td> </tr>
</tr> <td>50</td> <tr>
</table> </tr> <td>Eve</td>
<tr>
</body> <td>Jackson</td>
<td>Eve</td>
</html> <td>Jackson</td> <td>94</td>
The following values are allowed : <td>94</td> </tr>
</tr> <tr>
 dotted <tr> <td>John</td>
<td>John</td> <td>Doe</td>
 dashed
<td>Doe</td> <td>80</td>
 solid <td>80</td>
</tr>
 double </tr>
</table> </table>
 groove <p><strong>Tip:</strong> Try to
 ridge </body> change the padding to 5px.</p>
</html> </body>
 inset </html>
Cell Padding
 outset <!DOCTYPE html>
 none <html>
 hidden <head>
<style>
Border Color
table, th, td {
<!DOCTYPE html>
<html> border: 1px solid black;
<head> border-collapse: collapse;
<style> }
th, td { th, td {
border-style:solid; padding: 15px;
border-color: #96D4D4;
}
}
</style> </style>
</head> </head>
<body> <body>
<h2>Cellpadding</h2>

You might also like