Formatting Table Cells

  • Unknown's avatar
    auxclass · Member ·

    I would like to put boxes around the numbers of the cells in the table – thin black line – I don’t have the CSS upgrade so any custom need to be inline – I plan on making four or five of the same tables with questions and then down at the bottom of the Post a set with the answers. The link to the test Post on my test blog is below

    Thanks

    http://auxclass.wordpress.com/2011/11/06/test-table/

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    There seems to be some odd CSS going on with tables in twenty ten. But it’s 2:30 a.m. and this is as far as I got. Maybe it will get you started: 

    <div align="center">
<table style="border:0 none;">
<tbody>
<tr>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T
T2</td>
<td style="vertical-align:top;width:50px;">T</td>
<td style="vertical-align:bottom;width:50px;">T</td>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T</td>
<td style="vertical-align:middle;width:50px;">T
</td>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T</td>
</tr>
<tr>
<td style="vertical-align:top;width:50px;">T</td>
<td style="border:1px solid #F60E2F;vertical-align:top;width:50px;">T</td>
<td style="vertical-align:middle;width:50px;">T
T2</td>
<td style="margin-bottom:20px;vertical-align:middle;width:50px;">T</td>
<td style="border:1px solid #F60E2F;vertical-align:bottom;width:50px;">T</td>
<td style="vertical-align:bottom;width:50px;">T</td>
</tr>
<tr>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T</td>
<td style="vertical-align:top;width:50px;">T</td>
<td style="vertical-align:bottom;width:50px;">T</td>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T</td>
<td style="vertical-align:middle;width:50px;">T</td>
<td style="border:1px solid #D89D4B;vertical-align:middle;width:50px;">T</td>
</tr>
</tbody>
</table>
</div>

    I don’t understand why I needed the div but without it, the left edge of the cells gets cut off.
    valign is deprecated so you need to use style instead. My illustration of top, middle, and bottom might be messing things up: Removing the T2 lines makes part of the borders of the cells disappear.

    We’ll hope Panos can figure out the problem.

  • Unknown's avatar
    auxclass · Member ·

    Thanks – I copied the code into the test Post – the real one is down on Windows Live Writer and has a lot of numbers in it –

    This helps and I am putting in a bit of stuff and seeing what happens – html is not my strong suit so this is a bit of monkey see monkey crash things – but this does help

    thanks much

  • Unknown's avatar
    auxclass · Member ·

    Thanks Tess – I took some of the code and put it in and changed the color – bit of a geometric pattern as I have not corrected everything – but it looks like this will work

    thanks for the help

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Mike,

    You are welcome.

    I don’t have a table generator. To test the formating I usually start with a skeleton of the table, for example 2 or 3 cells by 2 or 3 rows. I put in something more descriptive than “T” so I can fill it in later with the browser find button.

    Good luck with it.

  • Unknown's avatar
    auxclass · Member ·

    Windows Live Writer will generate Tables (that’s where the original code came from) but it does older depreciated code and has some limits – my last Post I copied the html table from an earlier Post and changed the pictures etc in it – had things looking not too bad and when I uploaded the Post everything blew up – the table was truncated the end of table markers were moved – took me two or three hours to fix the table –

    I put some of the code in WLW and it looks like WLW does not like all of it and there are some outer lines missing – there was a certain ease with my old site where I just linked to a pdf document that I built in Open Office –

    thanks again

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    I am so clever that sometimes I don’t understand a single word of what I am saying.
    Oscar Wilde

    I looked again this now, and know I am missing something obvious.
    Maybe it would be more efficient for you to use Scribed with your pdfs?
    Or instead of borders around the cells, use a light background color?
    The older themes, when I started, didn’t impose “quirky” CSS on tables. Guess I should learn something about CSS in order to be more useful.

  • Unknown's avatar
    auxclass · Member ·

    Tess

    Well some progress – a lot of hand work on the real Post – but it is still in edit mode so I won’t put the edit link here –

    I did put a Scribd documents on the test page – uploaded as both PDF and Open Office – if uploaded as PDF the document can be secured when the PDF is made with a password (I lock some to keep changed from being made and keep my credit at the bottom of the page – so if they are going to steal from me at least they have to work a bit)

    Open Office Writer documents are converted to plain PDF documents – a bit of work on the base document would be needed to make the squares on the screen easier to see – but things did not look too bad –

    One note – a Scribd document can be revised so that would answer those that want to have a link in their blog to a document that they change – the address of the Scribd document stays the same.

    I need to do a bit of thinking about the format, cell size etc before I do the next homework assignment – but this does show potential for some of the things I do for my web site –

    The cells are easier to read when done directly on my web site – but probably some fine tuning on the base document for Scribd could fix that.

    Thanks much for the suggestion!!

    http://auxclass.wordpress.com/2011/11/06/test-table/

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    any of those pdf links look good. Very businesslike. Readable (if i understood what the numbers meant. lol)

    Wish I could be more helpful: tables I make are almost always used to arrange images with nice background colors and occasionally some caption-like text below. Defining borders around cells is new to me.

  • Unknown's avatar
    auxclass · Member ·

    The numbers are for navigating on a boat – a practice sheet.

    Your border thing worked great – I just needed to change the color then paste the new code in 48 times and fix the hard space that got added when I copied from Windows Live Writer to WordPress.

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    Ok then. You will forgive me for calling you by the wrong name then the other day! LOL

  • Unknown's avatar
    panaghiotisadam · Member ·

    @Tess: The defaults you may or may not need to override or change in 2010 are 100% width, light grey border for the whole table, light grey top border for each cell, 6px vertical padding and 24px horizontal padding for the content of each cell.

    @Mike: Is there anything else you’d like to change in your test tables?

  • Unknown's avatar
    auxclass · Member ·

    @Panos – things look great – just what I wanted – no need to change anything – thanks much everyone

  • Unknown's avatar
    auxclass · Member ·

    This is what I decided to use. I may use Scribd for the next set and do some work on the cell size and font size (doing some testing on the test site) – using Scribd and making the text and cells bigger would mean that I would only have one document and set of figures to maintain. Having no redundant data or storing the same data in more than one place can be bad.

    thanks again for the help.

    TVMDC – Practice – Correcting and un-correcting the compass

  • Unknown's avatar
    1tess · Moderator Emeritus ·

    I agree, Scribd could be a better solution for you. Being able to see the tables (numbers and formatting) as you work on them seems as if it’d be easier than html, plus having files which you can save and print easily is a bonus.

  • The topic ‘Formatting Table Cells’ is closed to new replies.