Some more tables

Since few of my readers became interested on table collages I use on my blog, I here try to explain in more details how it works. First of all you need to understand what HTML table is and how width definitions work. Here's a simple one line table.

<table>
<tr><td><img src="https://serola.files.wordpress.com/2012/01/800ce-20120110a.jpg" width="100%" /></td><td><img src="https://serola.files.wordpress.com/2012/01/90d49-20120112a.jpg" width="100%" /></td><td><img src="https://serola.files.wordpress.com/2012/01/919c6-20120113a.jpg" width="100%" /></td></tr>
</table>

Notice that there are one row (between tr-tags) and three cells (td-tags). Then what is important is to define the width of the pictures inside the cells. Therefore I have added width="100%" inside each image tag. And the result looks like this:

Do notice the gray borders around the pictures. That is because I have added them on my blogs's style sheet. Moreover, you may see also table borders on some browsers that does not make set them zero by default. But the images are now made to display 100% wide related to cells (td-tags).

Next thing to understand is how all the styling can be done somewhere else aka on the MyOpera style sheet. To access your own style sheet you need to go to 'Account > Design > Customize > Edit CSS'. There you find either an empty form or your previous settings for page styles.

Now just write there for example this:

table.collage img { width: 100%; border: 0px; }

Then make sure you select 'Use my custom style sheet together with the current blog design' below the form and save it.

What that line says is the following: "In tables called 'collage', set the image width to 100%, and set the image border width to zero." Now we can do the previous table again, but instead of defining image width for each image separately, we call the settings on style sheet once inside the table tag like this:

<table class="collage">
<tr><td><img src="https://serola.files.wordpress.com/2012/01/800ce-20120110a.jpg" /></td><td><img src="https://serola.files.wordpress.com/2012/01/90d49-20120112a.jpg" /></td><td><img src="https://serola.files.wordpress.com/2012/01/919c6-20120113a.jpg" /></td></tr>
</table>

There the definition class="collage" calls the styles for this table only, and set the width of all images inside that table for 100% and removes the image borders.

Now you see table where the borders of the table are set for default. To make sure table looks just as you wish, you can add something like this:

table.collage img { width: 100%; border: 0px; }
table.collage { border: none; border-spacing: 5px; width:100%; table-layout: fixed; line-height:0px;}
table.collage td { padding: 0px; }

There we again first have the setting for images inside the table. Then there are defined that this table called as 'collage' should have no borders, but there is still 5px space around cells. Then it is made sure that table always is 100% related to area where the table is. Table-layout: fixed is there to make sure that cell widths stay fixed aka do not get altered by contents. Line-height is useful to make sure there does not come any extra space around elements. And finally padding is also set to zero for cells.

Now you hopefully understand how useful it is to define the settings for tables on the style sheet, and you know how to start with table collages.

Advertisements

15 thoughts on “Some more tables

  1. 5banks Sami. I'll save this page for use after I done playing in the mud and stuff.It's difficult for me, usually, to see how html works because the browser I've been using gets modified for mobile.Opera mobile for Android does a better job.Also, applying other sources to the Opera software is sometimes an experimental exercise in itself so having you work out the fine points is a great help.I may get called a "script kiddie" but it's like using stencils to make my penmanship legible to me.:up: Router or plasma cutter(start your own business!) I'd still need a template.

  2. It's good to remain open to "new" 'tricks of the trade', but I shouldn't have to worry about getting arrested for using a left handed hammer!I may tumble, but, I won't put beads in my hair. I'm often suspected of needing flowers though.

  3. Those collages on the other articles are just improved versions of this. There are used such things as "colspan" to make cols higher and percentages changed to adjust the cell sizes.

  4. Hi Sami How are You this Evening being Sunday??Okay I am going Now to give this a Go, Wish me Luck.:wizard::dragonfly: ⭐

  5. Soon starts the counting for votes on our presidential election. So, exiting evening this is going to be.Originally posted by Kelisha:

    Now to give this a Go, Wish me Luck

    Good luck :up:

  6. Originally posted by serola:

    Soon starts the counting for votes on our presidential election. So, exiting evening this is going to be.

    Originally posted by serola:

    Good luck

    A Very Good Luck to You Sami & Who are You Voting for??:confused: 💡 :up:

  7. Originally posted by serola:

    Just copy paste the codes above.

    Okay Shall do Thanks!Originally posted by serola:

    But I really do not have time to guide through every step.

    I wasn't going to ask You Step by Step Questions Anyway as I have Too much Logic for That & I just wanted to know how to set my Computer edit settings to Apply Tables as You have done Above (does Author or User mode have anything to do with that?).Originally posted by serola:

    Try first, then bring on concrete questions, and I reply when I can

    Will do Thanks again Sami, Oh Yeah Who are You Voting for??:confused: :yes:

  8. Just copy paste the codes above. But I really do not have time to guide through every step. Try first, then bring on concrete questions, and I reply when I can :up:

  9. Originally posted by Kelisha:

    I just wanted to know how to set my Computer edit settings to Apply Tables as You have done Above

    That is just plane HTML, which you write in editor, and then see the results on final Web page. No other requirements needed.Originally posted by Kelisha:

    Who are You Voting for?

    That's my business, and my business only :p

  10. You Probably going to think that this a Dumb Question but how do I even get it to Apply in Table Format Sami?? :confused:

  11. Originally posted by serola:

    That is just plane HTML, which you write in editor, and then see the results on final Web page.

    Oh I see what You mean Sami Thanks 😀 all this Editing of Url Codes into Table Collage format with Photos is a Very new thing to Me as when I used my Older Desktops that are broken I would only Use them for Facebook & Search Engine Tasks & Note Writing.:spock: :sherlock: Originally posted by serola:

    That's my business, and my business only

    Sorry to Impose Sami this is definitely not My Intention to be Nosy.

  12. Sami When you get a Chance to Check out My Blog please do so you can see what went Rite & what Didn't, Thanks.:sherlock:

Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s