Best way to apply different fonts to tables

[lise]

I have a custom css and I also use table css for my table (which of course only applies to structural things).
From what I have read, many people use <p> styles in each cell (and it turns out there are <p> tags in each cell of my table).
I like things simpler.
I thought I was being really smart by applying a custom <div> class surrounding the entire table with a new font specification, and of course that would work if it weren't for all the <p> tags in each cell. I didn't want to go ahead and delete all the <p> tags just in case there is something I'm not seeing (I'm still very new to Flare).
Then I decided maybe the best way was to create p.small (with font: .85em) and p.smaller (with font: .75em) and then apply those new paragraph tags to the various cells.
Both the div method and this last method raised questions.

1. Is it wise to remove all <p> tags within cells of a table and use a div with a font spec instead, where I can assign specific p tags where I need the text to be larger or smaller than what is indicated in the <div> tag?
2. And if it is best to have <p> tags in each cell, is there a quick way to mass select the <p>s I want to turn into <p class="small"> and then mass selecting the other <p> tags that I want to turn into <p class="smaller">?

[kwag_myers]

I've tried removing <p> tags from tables and regretted the decision about halfway through the process. You can set the font size in the table CSS in either the Rows or Columns tab of the TableStyle Editor. If you want .75em in some tables and .85em in others, I think the easiest way is to have a different CSS for each table style. Mixing sizes in the same table is going to be a manual process.

What is your criterion for the different sizes? If you what the headers to be .85em with everything else .75em, you can set this in the table CSS also.

[dorcutt]

And if it is best to have <p> tags in each cell, is there a quick way to mass select the <p>s I want to turn into <p class="small"> and then mass selecting the other <p> tags that I want to turn into <p class="smaller">?

I'm a bit unclear about exactly how you would determine how you determine which <p> tags should be which size, but you may want to look into complex selectors: http://learn.shayhowe.com/advanced-html ... selectors/. They're a very powerful "mass selecting" tool, and they would allow you to configure your <p> tags based on where they appear. You could set up a child selector to handle paragraph sizing differently for <p> tags inside rows or header rows. You could even set up classes of rows, header rows, or even particular cells, and set up the generic <p> tags to be formatted differently depending on the particular class of the tag they are part of.

The only issue is that I'm not 100% sure how the selectors would interact with table styles. In any case, if it isn't something that's helpful in this particular occasion, it's a good tool to know about in general.

[lise]

You can set the font size in the table CSS in either the Rows or Columns tab of the TableStyle Editor. If you want .75em in some tables and .85em in others, I think the easiest way is to have a different CSS for each table style. Mixing sizes in the same table is going to be a manual process. What is your criterion for the different sizes? If you what the headers to be .85em with everything else .75em, you can set this in the table CSS also.

Kwag_myers, ah yes, I see that now. I think what I might need are two different kinds of headers; one <th> for the main table title and either another <th> formatted a bit differently to be used throughout the table or just a special <p> for bold and size.

The help file says that I can "create a special style class of the p style to be used for table content (e.g., p.tabletext)". Bingo, that is exactly what I want, but I can't for the life of me find out where to create those classes so that they appear as options in the Table Stylesheet Editor. I want them in the table stylesheet not my main one, to avoid confusion in the future and to keep the inheritances straight. Do you know where I need to create them? (The help file doesn't include that information as far as I can tell).

I'm a bit unclear about exactly how you would determine how you determine which <p> tags should be which size, but you may want to look into complex selectors: http://learn.shayhowe.com/advanced-html ... selectors/.

dorcutt, thank you for that link. Complex selectors are definitely of interest to me (I just learned about them in the css video series on Flare's website). I may give it a go to see if it would work in a table.

As for your first statement, yeah, that's the thing. I wanted to first make the entire table's font smaller (still thinking about how to do that) then within each cell of column 1 there will be a title (which I want emphasized) with a (long) description which I may or may not turn into a list. I can think about all of this once I know how to create table-specific classes that appear in the Table Stylesheet Editor (see my reply to Kwag_myers above).

[kwag_myers]

I think what I might need are two different kinds of headers; one <th> for the main table title and either another <th> formatted a bit differently to be used throughout the table or just a special <p> for bold and size.

You can set header styles on the Header tab of the Tablestyle Editor. If no Header Style displays, click the New Item icon on the right of the pane. You may need to set the number of Header Rows in the Table Properties (accessible from the Table tab).

The help file says that I can "create a special style class of the p style to be used for table content (e.g., p.tabletext)". Bingo, that is exactly what I want, but I can't for the life of me find out where to create those classes so that they appear as options in the Table Stylesheet Editor. I want them in the table stylesheet not my main one, to avoid confusion in the future and to keep the inheritances straight. Do you know where I need to create them? (The help file doesn't include that information as far as I can tell).

I don't think it works that way. In the center of the Table tab, the Cell Content Style is enabled when you click anywhere inside the table. A dialog displays with valid paragraph styles from the main CSS. If you need to keep the styles in the Table CSS, I think you have to set each row in the TableStyle Editor.