How to fix a table size?

How To
1

Hello,

Is it possible to fix/lock the table size even if I insert a lot of text or a big image? Because every time I insert a picture or a lot of text the table’ size is constantly changing making the table disproportionate.

Cheers,
Rui

2

Hey,

To have a specific fixed dimensions of your table you can always use some inline CSS in the table tag and set a specific value for the dimensions of the table.

For example refer the code snippet below :

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" bgcolor="#252525">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="300" bgcolor="#252525">&nbsp;
    </td>
    <td width="300" bgcolor="#454545">&nbsp;
    </td>
  </tr>
</table>

I hope this helps.

Note : This is just a random example on how to and where to use the inline CSS within a HTML table. Please don’t interpret the above code snippet as a possible solution.

Regards,
Prakhar

3

Hello,

Thank you so much for your help once again, but is there any solution that doesn’t need to use code?

Cheers,
Rui

4

Hey,

In order to achieve what you wrote in your opening remark to this post you need to use some inline CSS. The minimum you can do it to only use the width and height attributes in order to give a specific dimension to the table or to a certain row or column.

Refer to the example below :

<table align="center" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
		    <td style="width: 150px; height=150px;">
            <p>TEXT</p>
            </td>
            <td style="width: 500px; height:500px;">
			<h2><a href="https://openlab-cn-may.web.cern.ch/member/intel" hreflang="en">Intel</a></h2>
			<p>TEXT</p>
			</td>
		</tr>
	</tbody>
</table>

I hope this helps.

Regards,
Prakhar

1 Like
5

Hello,

Thank you so much for your help, but can I copy this code only changing the width and height of it?

Cheers,
Rui

6

Hey,

No need to copy the code, just add style=“width: value_in_px; height= value_in_px;” inside the table tag or tr tag to have a specific custom dimension for the table or a particular row/column (depending upon what values of px fits your requirements)

I hope this helps.

Regards,
Prakhar

7

Hello,

But isn’t the same as using the table option right next to “image” and “CDS Media”?

Cheers,
Rui

8

Hey,

Yes correct the Table gives you the same privilege but since you were case specific with certain attributes what I had recommend above was considering the fact you use the table from the drupal editor and then use the source to add some inline CSS

As written above and referring to the code snippets shared, my suggestions were based on using inline CSS in the table tag or tr tag

Maybe I was bad at explaining myself, apologies for the the confusion and inconvenience caused.

To keep it simple and summarise it all, you can use the Table from the drupal editor and then use the source to add some inline css for attaining the custom dimensions or designs that best suits your requirements.

I hope this clears the air and apologies for the inconvenience caused.

Regards,
Prakhar

1 Like
9

Hello,
No worries. I understood your explanation. I will try to do so.

Many thanks and cheers,
Rui

10

But in the specific e.g. you showed me, what’s the CSS and what isn’t the CSS?

Cheers,
Rui

11

Hey @rcostaan,

Inline CSS refers to using the style attribute inside HTML elements (style attribute inside a relevant HTML tag). Thus, referring to the examples I shared above, the code inside the style=" " attribute refers to inline CSS.

Refer this W3Schools Tryit Editor for better understanding.

I hope this helps and clears the doubts. Feel free to write us back here incase you face any other issues.

Regards,
Prakhar

1 Like