Prev Page Next Page
Top

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:

EXAMPLE:

table, th, td { border: 1px solid black;}

Run


➢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:

EXAMPLE:

table { width: 100%;}

Run


➢The border-collapse property sets whether the table borders should be collapsed into a single border.

EXAMPLE:

table { width: 100%;}

Run


➢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.

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>

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.

EXAMPLE:

<div style="overflow-x:auto;">
<table>
   Table Content
</table>
</div>

Run


Prev Page Next Page





FEEDBACK

Rating


Message