1. Horizontal alignment
2. Vertical Alignment
text-align: value;
|
NOTE -
By default <td> items are center aligned. |
<!DOCTYPE html>
<html lang="en"> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { text-align: center; } </style> <head> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <title>Document</title> </head> <body> <html> <head> <title>HTML Tables</title> </head> <body> <table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> </tr> <tr> <td>Row 5, Column 1</td> <td>Row 5, Column 2</td> </tr> <tr> <td>Row 6, Column 1</td> <td>Row 6, Column 2</td> </tr> </table> </body> </html> </body> </html> |
vertical-alignment: value ;
|
<!DOCTYPE html>
<html lang="en"> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } td { height: 49px; vertical-align: bottom; } </style> <head> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <title>Document</title> </head> <body> <html> <head> <title>HTML Tables</title> </head> <body> <table> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td></td> <td></td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> </tr> <tr> <td>Row 4, Column 1</td> <td>Row 4, Column 2</td> </tr> <tr> <td>Row 5, Column 1</td> <td>Row 5, Column 2</td> </tr> <tr> <td>Row 6, Column 1</td> <td>Row 6, Column 2</td> </tr> </table> </body> </html> </body> </html> |