Align text in table

The text alignment is going to be problematic because some of your table rows have inline css. To override that you need to use the !important rule which is really not the best practice. Also, your images are using inline alignment so you’ll need to target table rows other than the image row. If you remove the inline css styles, and add a class to the text rows, you’ll have a much easier time trying to position the elements. The logo and twitter images are another story. Personally I’d worry about fixing one thing at a time.

Also, your images are using inline alignment so you’ll need to target table rows other than the image row. If you remove the inline css styles, and add a class to the text rows, you’ll have a much easier time trying to position the elements.

How can I do that?

Are you building your tables manually in the page? Using a plugin? Somewhere the inline styles are being added to the table elements.

Im building my tables with “TinyMCE Advanced”.

Personally I don’t advocate building tables using the visual editor. If you code them manually using html in the text editor you’ll have more control over the outcome. Or you might check out this list of table plugins.

Perfect, then ill try to do tables with plugin!

Hi again,
I’m trying to do with Easy Table plugin.
But i’ve this problem again:
https://www.overclockgaming.com/?p=659
I’ve the code on the Simple Custom CSS, but it doesnt works: https://gyazo.com/e7d40dffaf82b8c3f6b3b8c61ae68727
The page code is that:

<pre><code>[table width="50%" align="left"] <img class="aligncenter size-thumbnail wp-image-430" src="https://www.overclockgaming.com/wp-content/uploads/2015/12/Thresh_2-150x150.jpg" alt="Thresh_2" width="150" height="150" /> Nombre: Jorge "WildTAZ" Iba?ez
Posición: Top <a href="https://euw.op.gg/summoner/userName=nefer"><img class="aligncenter" src="https://www.overclockgaming.com/wp-content/uploads/2015/12/logolol.jpg" alt="" /></a></code></pre>
<pre><code>[/table][table width="50%" align="right"] <img class="aligncenter size-thumbnail wp-image-430" src="https://www.overclockgaming.com/wp-content/uploads/2015/12/Thresh_2-150x150.jpg" alt="Thresh_2" width="150" height="150" />Nombre: Jorge "WildTAZ" Iba?ez
Posición: Top <a href="https://euw.op.gg/summoner/userName=nefer"><img class="aligncenter" src="https://www.overclockgaming.com/wp-content/uploads/2015/12/logolol.jpg" alt="" /></a> [/table]</code></pre>

What can i do?
Thanks!

Looking at the code above you have
<pre> and <code> tags embedded in the table div. I installed the Easy Table plugin and didn’t see these in the test table they provide. Do you know where these are being generated? That’s what is creating the “striped” background you see. Also, the css I posted earlier overrides the default theme css applied to basic HTML table elements. If you’re using a plugin you’d need to inspect the various elements of the plugin-generated table to see if there are unique class names applied to the table elements, and then adjust the css to apply to those classes. Or you could use the plugin table parameters to create inline styles for each table. But, if you later need to change one aspect of all the tables, you’d then need to change each table individually instead of just one place in the custom css.`

You might also try removing the table width 50% in the table parameters, then add this css:

/* reduce table width and move second table up */
.entry table {
    width: 48%;
    float: left;
    margin-left: 10px;
}

/* reduce table width and move second table up */
.entry table {
width: 48%;
float: left;
margin-left: 10px;
}

I tries to put your code but didnt work:
https://www.overclockgaming.com/index.php/prueba-equipo-2/

That’s because the inline styles set by the table plugin are overriding the custom css.

First table:

<table style="width:100%;" class="easy-table easy-table-default ">

Second table:

<table style="width:100%;  margin-left:auto;margin-right:0" class="easy-table easy-table-default ">

You need to either remove those styles in the plugin settings, or change the custom css to use the !important rule:

/* reduce table width and move second table up */
.entry table {
    width: 48% !important;
    float: left;
    margin-left: 10px !important;
}

It works! https://www.overclockgaming.com/index.php/prueba-equipo-2/
Now idk why this show up: https://gyazo.com/fdf91f627038c4e8b2ec705495b8646c
How can i remove that?
And that: https://gyazo.com/a3d27b95bd24287dd03d1603e76ac532
Thanks bdbrown!

Glad it’s working. As to your other questions, this is the theme css that’s being applied to the numerous <pre> and <code> tags on the page:

.entry pre {
    background: url(img/pre.png) repeat top;
    padding: 18px 20px;
    margin: 30px 0;
    border: 1px solid #ddd;
    line-height: 19px;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-x: auto;
    overflow-y: hidden;
}

.entry code {
    background: #eee;
    padding: 0 3px;
}

Your first table contains a table header row which holds the Thresh image. The first table body row holds the logo. It has a class of “alt” so it is not shaded. Below that is this table row:

<tr>
  <td>
    <pre>
      <code></code>
    </pre>
  </td>
</tr>

Although it doesn’t contain any data the <code> tag is still being styled by the above css. The center “block” that you see is the .entry code padding. The second table doesn’t show this because it doesn’t contain this row.

The block below the tables is created by this HTML:

<pre>
  <code>&&nbsp;</code>
</pre>

The non-breaking space between the <code> tags is being styled with the same css padding.

You also have another instance of this just above upper left-hand corner of the first table. That small “block” is also the <code> tag padding. As I mentioned earlier I didn’t see any of these tags when I tested the Easy Table plugin, so not sure how they’re being generated.

It works!
I had useless <pre> and </code>
Thanks bdbrown!

You’re welcome. Glad you got it working.