CSS Table Alignment

CSS Table Alignment


Table Alignment
There can be two types of alignments given as follows - 

1. Horizontal alignment

2. Vertical Alignment

Now we will discuss both of them with example down below - 
1. Horizontal Alignment 
Horizontal alignment is controlled by the text-align property. 
This only has an effect on block elements with a width greater than that of their content.
Syntax - 
text-align: value;
Valid values are given down below - 
  • left
  • right
  • center and
  • Justify
NOTE -

By default <td> items are center aligned.
Now we will see example - 
Example - using value - center
<!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>
Output - 
Example 2 - using value - left
Output -
Example - using value right
Output -
2. Vertical Alignment - 
If a block element's height is taller than its content, by default the text will be aligned to the top of the container.
Vertical-align property is used for vertical alignment syntax is given down below - 
Syntax - 
vertical-alignment: value ;
Now we will see Example - 
Example - 
<!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>
Output -