I am finishing up a project that is a rather complex form. To match up the layout to the existing Excel file I used tables. As it turns out the online form's primary purpose is to generate a printed document to be archived. The form fits well on a 800 pixel screen but does not print well. I am attempting to narrow the page when printing but it isn't able to scale things down, it seems to be limited by the text or width of tables within the table. Can style be used to squeeze a table down when table attributes (width, nowrap, etc) are used?
Yes, CSS should override inline styles - if it does not, including !important should do so... Though really one shouldn't be inlining presentation in your tables anymore, that's what classes and CSS are for in the first place. Move all presentational information like widths into a screen.css, make a print.css, attach the media types when you link in the .css files and you should be good to go. Remember the unholy trinity HTML - Content CSS - Presentation Javascript - Behavior It sounds like you've got your presentation in your html...
I still use tables, especially when I have a 40 field form that need to act like a spreadsheet. In the unholy trinity, you still use tables for grids, right? If not, give me a snippet of code or point me to a primer on replacing tables with style. Thanks.
You do, but you style them via CSS.... Though a form sounds like something a table shouldn't be doing.... depends on the layout I guess. If you could post a small sample version of the table (say 5x5 or so) I could illustrate how I'd go about it 'the new way'. I'd have to see exactly what it is you are styling to put together a meaningful example.
It's an "Internal Use Only" so I can't send much of an example but I can describe it. I have a table with 6 columns and about 20 rows. The columns are as follows: Test name Description Factor 1 Factor 2 Result Pass/Fail Factors are inputted and a result is calculated and then a Pass/Fail indicator is set. There are ten tests and they wanted all of the tests on the same page so they could print it out for filing before saving the data. It was easy to create a table and position everything. If I didn't use a table would I use div tags and position and size them using CSS?
Ok, for that I'd use a table as well... Have a look at this: http://battletech.hopto.org/for_others/tbarr60/tableform.html and it's three CSS files http://battletech.hopto.org/for_others/tbarr60/common.css http://battletech.hopto.org/for_others/tbarr60/print.css http://battletech.hopto.org/for_others/tbarr60/screen.css You'll notice in the print one we tell it to use pt sized fonts and inches for the width, while the screen one is set to EM for the width, and uses px padding. In THEORY we could use colgroups to not have to say 'class=' on each and every one of them, but Gecko has no support for that entire section of the HMTL 4 specification... We could use sibling selectors (td, td+td, td+td+td) except that's unwieldly and not supported by IE - Theoretically we could use both, but that ends up more code and more complex than just listing the classes in the first place. Besides, with the classes on the TD's we can style the inputs off that class ".Result input", which I did make an example of changing the border colors on .Result and .PassFail Usually when making a print.css I'll apply display:none to my menus and navigation, and not load presentational images like logo, etc... Design a whole different appearance for the print version since all my presentation is... in the CSS.