CODEWITHSUNDEEP
htmlcss-tables
Dan Jacobson
Dan Jacobson

Reputation: 596

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?

Upvotes: 0

Views: 56

Answers (3)

Dan Jacobson
Dan Jacobson

Reputation: 596

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.

Upvotes: -3

RickN
RickN

Reputation: 13500

You cannot. The style attribute affects only the element it's on and contains no selectors. Is an inline <style></style> tag possible, rather than an external stylesheet file?

For e-mail, especially older or strict clients that don't support the tag, tools such as this "CSS inliner" were created.

It looks through a <style></style> tag and will add a style attribute to all tags that match the selectors.

For example, this:

<style>
p { color: red; }
a { color: green; }
</style>

<p>Visit 
<a href="https://example.com">a website</a> 
to read things.</p>

Renders as:

<p style="color: red;">Visit 
<a href="https://example.com" style="color: green;">a website</a> 
to read things.</p>

Note that some things that are possible in stylesheets, such as a:hover{}, can't be expressed in a style attribute.

Upvotes: 2

Salketer
Salketer

Reputation: 15711

If you cannot use styles tag, you cannot. You will need to inline the style attribute to ALL TDs.

If you are not allowed to use a CSS file, but can still add HTML, you could add styles inline.

you could do this:

<style>
#myTable td{
border:1px solid black;
}
</style>
<table id="myTable">
...
</table>

Upvotes: 1

Related Questions