I'm new to the html/css world and learning as I go, designing a simple web site for my business (no Flash, no e-commerce, just information -- SIMPLE!). This may be a pretty basic question -- I rather hope it is -- but I can't find it addressed in any number of forums. In fact, most people who are asking are trying to do the opposite.
I'm specifying XHTML for the page, and using an HTML table (I know, I know, but I'm still trying to get my hands around CSS divs, and I expect the problem might not go away, anyway). I have one row with a light gray background. In the second row, the 1st cell has an orange background. Between the two are two pixels of white, so the colors don't touch. I have margins, borders, and padding all set to 0, and nothing I do gets rid of these white rows. Aside from the settings mentioned, I've also tried setting a solid border, which had no effect. This is happening in both Firefox 3.6 and IE 8.
To sum up the question:
Is this a function of using tables?
If so (or even if not), will using DIVs resolve the issue, once I figure them out?
Am I overlooking some other solution?
I'm looking to do this strictly with html and css, no other languages. I've been working with computers for over 30 years, but the last programming I did in earnest was in FORTRAN 77 and I haven't worked much with 3GL or 4GL languages (a tiny bit of PERL, some scripting languages in test tools, I'm quite knowledgeable in UNIX scripts, and I can read but not write VB and the C family).
Same as cellspacing=0 just css:
table {
border-collapse: collapse
}
And the cellpadding=0 is:
table td, table th {
padding: 0;
}
Just for you to see the CSS approach too :)
You need to make the html for the table look like this:
<table cellspacing="0" cellpadding="0">
But you REALLY should do divs. They are far superior AND they will solve your problem.
Sounds like it might be a cell padding or cell spacing issue. Try this documentation. It also provides a quick method for checking html.
Related
So I'm trying to create a simple header/content layout where the content part extends to the bottom of the window.
Doing it with CSS looks impossible, at without introducing too much complexity considering how simple is this layout.
Please tell me a SINGLE reason why I shouldn't do this
body, html { height: 100%; padding: 0; margin: 0; }
#h{ height: 150px; }
#tbl { height: 100%; }
<table id="tbl" cellpadding="0" cellspacing="0">
<tr>
<td id="h">header</td>
</tr>
<tr>
<td>content</td>
</tr>
</table>
And don't tell me about semantics and how tables weren't made for layout.
It seems most web designers today are masochists who spend hours everyday trying to build simple layouts in very complex ways because they like to torture themselves with things that don't matter.
I can hear you already saying "But... but... john using divs instead of tables is the latest hip thing to do, you don't want us to be mocked by the other web designers do you?"
We do not use table layout anymore because they are not semantic. Bots and screenreaders can not identify what the content is good for. Secondly you will want to separate your content from code for layout (distribution of duties).
Having an external CSS file will make your page much more easy to maintain. If you have 20+ pages which all have a table to keep content in, you will pretty likly have to edit all this documents for a redesign. If you use CSS and have a good document layout width identifiers you will only have to change one .css file to alter all your layout for good.
You have a question. You want to have a content area under your header item. That ok and indeed can be solved with more complex CSS if you want to, but not have to be.
Firstly you will begin width your header. You can use <div> for that or use the headings (h1-h6) items. Like that every bot will know > "Oh! a headline. Thats important!"
Lets structure your document:
<body>
<h1>Header</h1>
<div class="static-content">
<p>Content</p>
</div>
</body>
We have a headline and a div width the classname "static-content" for layout reasons. You can change this name to what ever you want (no whitespace and start width a alphabetic char) you can also add multiple classes, separated by white spaces.
here is some CSS
html, body {
height: 100%;
margin:0;
background-color: gray;
padding: 0;
}
h1
{
display: block;
padding: 20px 10px;
background-color: blue;
margin: 0px 0px 0px 0px;
}
.static-content
{
background-color: red;
padding: 10px;
margin: 0;
}
So. Like you can see in the fiddle here: http://jsfiddle.net/NicoO/rC66e/2/
Your content area can be red (like it is). But you also see the gray background. The element in the background is the body you can work with the body like nearly any div.
So you see, you already have stretched your content area to the bottom of the browser. If you want the red area to be on the bottom also, you have multiple options to realsise that.
See the fiddle here: http://jsfiddle.net/NicoO/rC66e/3/
There are also other ways to realise that.
Update. If you really want that red area to be big, you could try something like this:
http://jsfiddle.net/NicoO/rC66e/5/
This is not a really good solution because I don't know what you want to use it for. You just could style the body element and you are good to go. If you want more complex layout, you will have to addapt your CSS. The soltion in this fiddle is not generic as it should be. But it shows, that you can do a lot of things width CSS. Even if you don't really showed us your use case.
Edit:
You keep saying "why don't i just juse a two row table?". But on the other hand you try to alter this rule for the answer here. Why don't you just a heading and a paragraph? like <h1>Title</h1><p>content</p> You can add a background-color to the body element and be done. There is no reason to do anything else here.
Final Edit:
You have a valid point #John. sometimes CSS can be a pain. But it is far superior to table layout. For most common problems there are Tools like grown grid systems, that get the most of the problems out of the way. W3C is working on making CSS more powerfull and easy to use. For example with thew new display:grid; property.
If you really give css a chance and try to addapt a new pattern of thinking about the box model, it will help you a lot. With HTML and CSS you can just write what you reall need without having to have a clumsy table all the time.
I'am sorry if I offended you. But i'd recommend you to weight the pros and cons of table vs css layout. There is pretty nice stuff around like responsive layouts, that you will not be able to fully use width these old techniques
My personal view:
Using tables for layout is like using coffee to stay awake. Don't do it too often. Maybe once in a while.
And certainly we shouldn't hassle people who use table-based layouts, especially when there's no sound, cross-browser way to do a particular layout in CSS.
That said...
1. Tables make it harder to design for multiple screen sizes at once
Responsive layout is important these days. Having different CSS rules for different viewport sizes, applied to the same HTML code, is a good way to adapt a site to all screens.
For very simple designs, though, a table-based layout may work at any screen size.
2. Tables can interfere with search engine indexes, screen readers, and other automatic web page parsing
In other words, not so good for SEO and accessibility.
However, it's worth pointing out that Google has recently been optimizing its search algorithm to distinguish between layout tables and data tables.
And there are some techniques like <table role="presentation"> to help screen readers handle tables, although those hacks can get complicated.
3. Table-based layouts require changing the HTML markup when you want to change the layout
Again, it's nicer and more conceptually pure -- and often more maintainable -- to use HTML for content/semantics only, so you can leave the markup alone when you make design changes. But practically speaking, in a substantial redesign you'd often need to make changes to the HTML anyway.
In sum, I believe that guidelines and best practices are more useful than hard-and-fast rules regarding tables for layout. It's a balancing act, and there are situations where tables can be, overall, a better choice.
Is there a semantic CSS or HTML property/attribute to show a table with rows & columns swapped?
In other words, I would like to write the code one way, but have something that flips the rows with columns, and vice versa.
Looking around, I only found JavaScript ways to swap them, but in my case — that's not what I'm looking for. (If there isn't a CSS/HTML solution, then I would rather refactor the code.)
Sorry, but no there isn't.
You might be to achieve something close by rotating the whole table by 90 degrees, and then rotating the cells by 90 degrees the opposite direction. You'd probably also need to manually set the height and width of all the elements to make it look sensible.
That would be a major hack, though; I really wouldn't recommend it.
There aren't any other CSS solutions to this; certainly not a "standard" one. It's not exactly a standard thing to want to do.
I understand your concern, but at present, the answer is no:
There is no clean way to do it with HTML and CSS alone. (Although rotating the table's cells 90° is definitely interesting.)
This situation has a few options, as you suggested yourself:
Refactoring your code (e.g. recoding the table manually, with a script/automation, or doing it in Google Docs spreadsheet and exporting as HTML — used to be possible a few years ago.)
Either using JavaScript to do the switch if you don't want to refactor; or using JavaScript as a function to switch back the refactored code — just in case you're looking to have a button on your site that says, "Flip Table".
Trying the proposed and experimental method of rotating the cells with CSS.
It will depend on what you want and the specifics of your implementation. I would say that progressively-enhanced JaveScript is clean code in most people's books (but in this case, it wouldn't degrade gracefully because people who visit without JS would see the original HTML table). Search engines will pick up JS as well.
But there ARE in fact at least two different CSS solutions.
There is this solution by David Bushell (using flexbox):
http://dbushell.com/2016/03/04/css-only-responsive-tables/
And this solution (using float)
tr { display: block; float: left; }
th, td { display: block; }
http://jsfiddle.net/XKnKL/3/
Not that I'm aware of. Looks like you want to do something like this:
How to invert (transpose) the rows and columns of an HTML table?
Basically this example works great on chrome and firefox but the marked table (marked with the "this table" comment) doesn't fill the whole container in IE. I want it to look like his brothers to the left. I've been looking at it for the last 30+ minutes wondering what in the world is causing it not to work. I could use the help of a 2nd pair of eyes
The whole thing is quite huge, the problem table is towards the end of the html.
The other tables that are filling up the container all have a wrapper div with a height declared on them but its missing on that one table that is not stretching. Add it and it works fine:
http://jsfiddle.net/aVkC8/1/
Oh and: Holy inline-css styles Batman!, you can greatly simplify your code with defined classes and styles for your table.
Have you tried using something like Normalize.css in order to get consistency across browsers?
From the homepage:
Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing.
Suppose, I create a calendar as HTML table where different cells have different background color and different text. It looks nice on screen.
I realized that it is not possible to print this table preserving the cell's background color.
Instructing my viewers to tweak their browsers to print the calendar is just ridiculous.
Is there any trick to print HTML table as you see it on screen?
Maybe it is possible to somehow transform it to image, or something?
Here is a solution that I came up with.
Below is an illustration of creating printable 3x2 board, with 100pt x 100pt cells. I simplified the fragment as much as possible. Main idea: every cell has an image that is overlayed by text. This is much more slower than having simple background color, but allow having single codebase for screen and printing. You can get rid of inner spacing with additional styling.
<table style="table-layout:fixed; width:300pt; height:200pt; border-collapse:collapse; line-height: 0;">
<tr>
<td>
<img src="Content/images/backTab.png" style="width:100pt; height:100pt; position:relative; z-index:0" />
<div style="position:relative; top:-50pt; z-index:1; color:Red; text-align:center; ">Text</div>
</td>
I'm new in Web development and I found the whole situation being ridiculous. Thousands developers crying about printing of background color/image but nobody cares. I have looked at W3C HTML/CSS/Printing standards. There is nothing there about suppressing backgrounds on printing. If browsers make decision to save user's ink, there must be CSS style to explicitly enforce the background printing. In this case there will be no stupid difficulties to show and print chess board, or crossword puzzle, or calendar.
If anyone has connections in W3C, please, let them know.
You can create a css file and specify it in the html that it should be used for printing:
http://www.alistapart.com/articles/goingtoprint/
However, settings such as printing it as you see it on the screen require settings to be changed in the web browsers print settings.
Unfortunately there is no way around this without a custom solution.
You can play with Prototype Javascript and assign the HTML to canvas element which will create an image on the client side.
http://prototype-graphic.xilinus.com/
Hope this helps,
Jeffrey Kevin Pry
Couldn't you use 10x10 images with the background color you're thinking of and have them set to repeat across the background using CSS? (Fixed color images are very easily compressible and tend to be small, don't worry about the size as pointed out in the comments).
Also, in addition to my comment you can try to use: http://iecapt.sourceforge.net/
update: Also, this article probably can be helpful. http://www.codeproject.com/KB/graphics/html2image.aspx
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?