HTML Tables


Tables

HTML tables are a way to get a structured layout

To do this, several different tags work together


The structure: <table> <thead> <tbody>

The header: <th>

The body: <tr> <td>


Style Properties

Table borders: border

Table width: width

Table height: height

Vertical alignment: vertical‐align

Table padding: padding


Simple Table Example

<table>

<thead>
<tr>
<th>Simple</th>
<th>Example</th>
<th>HTML</th>
</tr>
</thead>

<tbody>

<tr>
<td>HTML</td>
<td>File</td>
<td>Example</td>
</tr>

<tr>
<td>CSS</td>
<td>Class</td>
<td>Example</td>
</tr>

</tbody>

</table>

Commonly Used Style Properties

Color: for text color

text‐align: for horizontal text alignment

border: for table borders

width: for table width

height: for table height

vertical‐align: for vertical text alignment

padding: for table padding


Using CSS Style

<!doctype html>
<html>
<head>
<style>
table, td, th {border:1px solid black; padding:15px}
td {color:purple}
</style>
</head>
<body>

<table>

<thead>
<tr>
<th>S.No.</th>
<th>Menu</th>
<th>Price</th>
</tr>
</thead>

<tbody>

<tr>
<td>1.</td>
<td>Chicken Pizza</td>
<td>$150</td>
</tr>

<tr>
<td>2. </td>
<td>Burger</td>
<td>$10</td>
</tr>

</tbody>

</table>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Table Css Style


Using Class Rules

<!doctype html>
<html>
<head>
<style>
table, td, th {border: 1px solid green; width:50%; textalign:center}
.pro {textalign:left; backgroundcolor:lightblue}
.zer {textalign:center; backgroundcolor:yellow}
.los {textalign:right; backgroundcolor:red}
</style>
</head>
<body>

<table>

<thead>
<tr>
<th>Product</th>
<th>Income</th>
<th>Cost</th>
<th>Difference</th>
</tr>
</thead>

<tbody>

<tr>
<td>Laptops</td>
<td>$300</td>
<td>$150</td>
<td class="pro">$100</td>
</tr>

<tr>
<td>Keyboard </td>
<td>$100</td>
<td>$190</td>
<td class="zer">$150</td>
</tr>

<tr>
<td>Mouse</td>
<td>$200</td>
<td>$300</td>
<td class="los">$250</td>
</tr>

</tbody>

</table>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Table Class


Positioning Example

<!doctype html>
<html>
<head>
<style>
table, td {border:1px solid black; width:80%; height:80%}
td {width:33.33%; height:33.33%}
.t {verticalalign:top}
.m {verticalalign:middle}
.b {verticalalign:bottom}
.l {textalign:left}
.c {textalign:center}
.r {textalign:right}
</style>
</head>
<body>

<table>

<thead>
<tr>
<th class="t l">>1</th>
<th class="t c">>2</th>
<th class="t r">>3</th>
<th class="t l">>4</th>
</tr>
</thead>

<tbody>

<tr>
<td class="m l">5</td>
<td class="m c">6</td>
<td class="m r">7</td>
<td class="m l">8</td>
</tr>

<tr>
<td class="b l">9 </td>
<td class="b c">10</td>
<td class="b r">11</td>
<td class="b l">12</td>
</tr>

</tbody>

</table>

</body>
</html>

Copy above code & try it into your natepad


Browser View Screen Below:

Table Positioning



Copyright © 2020. All rights reserved.