CSS Tables
➢To specify table borders in CSS, use the border property.
➢The example below specifies a solid border for <table>, <th>, and <td> elements:
➢The example below specifies a solid border for <table>, <th>, and <td> elements:
➢The table above might seem small in some cases. If you need a table that should span the entire screen (full-width), add width: 100% to the <table> element:
➢The border-collapse property sets whether the table borders should be collapsed into a single border.
➢The width and height of a table are defined by the width and height properties.
➢The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
➢By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
➢To control the space between the border and the content in a table, use the padding property on <td> and <th> elements: ➢Let's Create a table with all the attributes given.
➢The text-align property sets the horizontal alignment (like left, right, or center) of the content in <th> or <td>.
➢By default, the content of <th> elements are center-aligned and the content of <td> elements are left-aligned.
➢To control the space between the border and the content in a table, use the padding property on <td> and <th> elements: ➢Let's Create a table with all the attributes given.
EXAMPLE:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 2px solid green;border-collapse:collapse;text-align:center;heigth:200px;}
table { width: 100%;}
th, td { padding: 15px;}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Pages</th>
</tr>
<tr>
<td>HTML</td>
<td>7</td>
</tr>
<tr>
<td>CSS</td>
<td>7</td>
</tr>
<tr>
<td>JavaScript</td>
<td>7</td>
</tr>
<tr>
<td>PYTHON</td>
<td>7</td>
</tr>
<table>
</body>
</html>
<html>
<head>
<style>
table, th, td { border: 2px solid green;border-collapse:collapse;text-align:center;heigth:200px;}
table { width: 100%;}
th, td { padding: 15px;}
</style>
</head>
<body>
<table>
<tr>
<th>Course</th>
<th>Pages</th>
</tr>
<tr>
<td>HTML</td>
<td>7</td>
</tr>
<tr>
<td>CSS</td>
<td>7</td>
</tr>
<tr>
<td>JavaScript</td>
<td>7</td>
</tr>
<tr>
<td>PYTHON</td>
<td>7</td>
</tr>
<table>
</body>
</html>
RESULT:
| Courses | Pages |
|---|---|
| HTML | 7 |
| CSS | 7 |
| JavaScript | 7 |
| PYTHON | 7 |
Run
➢Add a container element (like <div>) with overflow-x:auto around the <table> element to make it responsive.
FEEDBACK
