Center html table

Question

Center html table

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Good I have these tables generated in pdf by php in html , and I would like to center them, but I do not get it. I attach the code:

 $content .= '
    <div class="row" >
        <div class="col-md-12">             
          <h2>Jornada 1</h2>
          <h3>'.$user['Fecha_Inicio'].'</h3>
  <table border="0" cellpadding="5">
    <thead>
      <tr>
        <th bgcolor="grey" width="22%">LOCAL</th>
        <th bgcolor="grey" width="22%"></th>
        <th bgcolor="grey" width="22%">VISITANTE</th>
      </tr>
    </thead>  
  ';
  $content .= '
<tr>
      <td width="22%">'.$user['Nombre_E7'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E8'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E9'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E4'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E5'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E2'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E1'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E6'].'</td>
  </tr>
  <tr>
      <td width="22%">'.$user['Nombre_E3'].'</td>
      <td width="22%" align="center">VS</td>
      <td width="22%">'.$user['Nombre_E10'].'</td>
  </tr>
';
 $content .= '</table>';

Thank you,

Greetings

html php

asked by Alvaro Ruiz 18.04.2018 в 11:28

source

2 answers

Error accessing SQLAlchemy and mysql database Problem when trying to load an external page on my website

score 2 · Answer 1

Me, where you put <div class="col-md-12"> would add a new class, for example something like this:

<div class="col-md-12 tableCenter">

And then I would define the tableCenter class with text-align = 'center' or, depending on whether you have or will put more classes or elements, with a margin = '0 auto'

score 1 · Answer 2

You can center the table to your container by creating a class, for example .table-center and indicate the margins and width of it.

Demo:

.table.table-center {
  width: auto;
  margin: 0 auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
  <div class="col-md-12">
    <h2>Jornada 1</h2>
    <h3>'.$user['Fecha_Inicio'].'</h3>
    <table class="table table-center">
      <thead>
        <tr>
          <th bgcolor="grey" width="22%">LOCAL</th>
          <th bgcolor="grey" width="22%"></th>
          <th bgcolor="grey" width="22%">VISITANTE</th>
        </tr>
      </thead>
      <tr>
        <td width="22%">'.$user['Nombre_E7'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E8'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E9'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E4'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E5'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E2'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E1'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E6'].'</td>
      </tr>
      <tr>
        <td width="22%">'.$user['Nombre_E3'].'</td>
        <td width="22%" align="center">VS</td>
        <td width="22%">'.$user['Nombre_E10'].'</td>
      </tr>
    </table>
  </div>
</div>