It's All About Tables

Category	: CSS		Views	: 4310
Version	: 2.0		Rating	:	2.7/5 (31 votes) Currently 2.74/5 1 2 3 4 5
Type	: Text

Obviously, it’s not as the title says, but still, this is a tutorial regarding one of the most important things in webdesigns, that have been used ever since the first HTML codes. What would you be doing without tables? Tables are that important to any coder because they represent the base of everything – it’s where you attach everything. It is a known fact that thanks to CSS, you would not need any tables to keep things together but the truth is actually that behind all complex, popular, good-looking websites there are still held together by those popular tables. Look at almost any website around and then check its source and it will not take too long until you find the very known <table> tag.

Managing tables

Rather than what they were originally intended, nowadays tables are used for far more complex things and web pages. The basic idea was for them to display data exactly how applications such as Microsoft Excel do it – several rows and columns that separate data – in other words, tabular data. Still, as said before, it is a long time now since tables have first served as a grid upon which fundamental things are built in order to put together an entire webpage. But if they were used for such a long time, why was it better to use CSS for tables you might ask.

Well, the problem with HTML was that no web designer found a viable method through which components or even visual zones could be arranged with just HTML code. For example, if you would be working for a photo magazine and you would have a website, you would be interested that each and every element in that page is arranged precisely as you would want them. This is where CSS steps in. With CSS you can actually get pixel-level control.

Using the table-layout property

What is the table-layout property? For example, if you want to have the possibility of specifying whether your table cells should remain at a fixed value or to expand to display their whole content you will need to use this certain property. Default value for table-layout is auto. What does auto mean in this case? This means that the browser will get stuck with the job of resizing the cell’s size before laying out the table. Or you can use the maximum value for the table-layout property (remember, maximum is a fixed value) and speed things up a bit. But careful! In this case, you might find that, for example if you are showing a photo, the setting may just cut off part of it.