Search code examples
htmlcss-tables

How to do <table style="something that will affect the TDs"> purely inline?


<td style="text-align:center"> is great, but let's say I need to do 1000 of them, and ... I am not allowed to use stylesheets. So what can I put in <table style="what"> that will let me just use just <td>'s with no attributes?


Solution

  • Use

    <table border="1" style="text-align: center;">
    

    Chrome browser rendering:

    chrome rendering

    of HTML:

     <table border="1" style="text-align: center;">
      <tr>
       <th>Flight</th>
       <td>HX657/CRK657</td>
       <td>HX641/CRK641</td>
      </tr>
    
      <tr>
       <th>Registration</th>
       <td>B-LND</td>
       <td>B-LHI</td>
      </tr>
    
      <tr>
       <th>Origin</th>
       <td>OKA/Okinawa</td>
       <td>FUK/Fukuoka</td>
      </tr>
    
      <tr>
       <th>Destination</th>
       <td colspan="2">HKG Hong Kong</td>
      </tr>
    
      <tr>
       <th>Aircraft</th>
       <td colspan="2">Airbus 330-343</td>
      </tr>
    
      <tr>
       <th>Altitude (ft)<br></th>
       <td>38000</td>
       <td>40000</td>
      </tr>
     </table>
    

    While text-align affects text, it also affects all inline and inline-block elements that are children of any block level elements.

    I see, I got away with it due to inheritance, which might not work for other cases.