How to center align all cells of html table at once?

Question

How to center align all cells of html table at once?

29 Views Asked by IgotiT At 01 August 2023 at 01:56

I am working on Time tabling software which generate time table in HTML format. When I open output file from directory, all the cell entries are center aligned, but when I send this file over email the cell entries becomes left aligned. Secondly, how I can increase font size of the title of table? The Html code is as follow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
  <head>
    <title>Punjabi University, Patiala</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" media="all" href="stylesheet.css" type="text/css" />
  </head>

  <body id="top">
    <table id="table" border="1">
      <caption>Punjabi University, Patiala</caption>
      <thead>
        <tr><td rowspan="2"></td><th colspan="3">Monday</th></tr>
        <tr>
          <!-- span -->
          <th class="xAxis">08:00</th>
          <th class="xAxis">09:00</th>
          <th class="xAxis">10:00</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="yAxis">BS I</th>
          <td>Chemistry<br />T13<br /></td>
          <td>Mathematics<br />T01<br /></td>
          <td>Physics<br />T21<br /></td>
        </tr>
        <tr>
          <th class="yAxis">BS II</th>
          <td>Physics<br />T22<br /></td>
          <td>Mathematics<br />T02<br /></td>
          <td>Chemistry<br />T12<br /></td>
        </tr>
        <tr>
          <th class="yAxis">BS III</th>
          <td>Chemistry<br />T11<br /></td>
          <td>Physics<br />T23<br /></td>
          <td>Mathematics<br />T03<br /></td>
        </tr>
        <tr class="foot"><td></td><td colspan="3">Timetable generated with FET 6.9.2 on 8/1/23 7:19 AM</td></tr>
      </tbody>
    </table>

    <p class="back"><a href="#top">back to the top</a></p>

  </body>
</html>

Original Q&A

There are 1 best solutions below

**HarrY** · Accepted Answer · 2023-08-01T02:10:56.157000

You can create a CSS class for this.

#cssTable tbody tr td 
{
    text-align: center; 
    vertical-align: middle;
}

And assign this id in you table tag

<table id="cssTable" border="1">

To increase the font size, you can use style property font-size. For ex: style="font-size:40px" I have included this in the code snipped below. I have applied font size as 40px, you can change it according to your needs.

You code is going to look like this:

<head>
    <title>Punjabi University, Patiala</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" media="all" href="stylesheet.css" type="text/css" />
  </head>
  <Style>
  #cssTable tbody tr td 
{
    text-align: center; 
    vertical-align: middle;
}
</Style>

  <body id="top">
    <table id="cssTable" border="1">
      <caption style="font-size:40px">Punjabi University, Patiala</caption>
      <thead>
        <tr><td rowspan="2"></td><th colspan="3">Monday</th></tr>
        <tr>
          <!-- span -->
          <th class="xAxis">08:00</th>
          <th class="xAxis">09:00</th>
          <th class="xAxis">10:00</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="yAxis" >BS I</th>
          <td>Chemistry<br />T13<br /></td>
          <td>Mathematics<br />T01<br /></td>
          <td>Physics<br />T21<br /></td>
        </tr>
        <tr>
          <th class="yAxis">BS II</th>
          <td>Physics<br />T22<br /></td>
          <td>Mathematics<br />T02<br /></td>
          <td>Chemistry<br />T12<br /></td>
        </tr>
        <tr>
          <th class="yAxis">BS III</th>
          <td>Chemistry<br />T11<br /></td>
          <td>Physics<br />T23<br /></td>
          <td>Mathematics<br />T03<br /></td>
        </tr>
        <tr class="foot"><td></td><td colspan="3">Timetable generated with FET 6.9.2 on 8/1/23 7:19 AM</td></tr>
      </tbody>
    </table>

    <p class="back"><a href="#top">back to the top</a></p>

  </body>
</html>

How to center align all cells of html table at once?

There are 1 best solutions below

Related Questions in HTML-TABLE

Related Questions in TEXT-ALIGN

Trending Questions

Popular # Hahtags

Popular Questions