Organic Hat


Understanding CSS & Tables in Web Design

Understanding CSS and HTML Table Use in Web Design

A Cascading Style Sheet (called ‘CSS’) is a web design code used to build fast-loading and easily-modifiable web pages. The idea behind “cascading” a style sheet is to resolve background conflicts so that different browsers see the page and display it to the web site visitor in a consistent format. The other purpose is to make it search-engine (SEO) optimized in order to gain more visibility and higher ranking with some of the larger engines, like Google, Yahoo, MSN, and Bing.

Tables are used in website design for the following reasons: to use databases for the collection and storage of generic information about site visitors and to harvest specific information about customers and/or clients. Tables may also be used to organize and display text and/or numerical information for web site visitors to view online. Tables can also be ‘visual-hidden,’ meaning they are in the background of a web page to help the writer set up and organize the page, but the table gridlines are not openly visible to the naked eye.

HTML (hypertext markup language), which preceded cascading style sheets, can build a web design table, but is a more complicated and less streamlined way to do it. A beginner may find a simple table easy to construct in CSS language by following a specific set of instructions for pre-built website design layout choices.

The process for building tables in basic HTML web design code is to use a set of toggle ‘switches’ (meaning “off and on” switches like you use for a lamp) that open and close the programming commands on a web design page.

For instance, the use of HTML tags such as are used for all tables. They are used to define the table and to define the content within the table. TABLE is used at the beginning and end (with a / slash at the end) to turn it off. The terms TR stands for “table row” and TD stands for “table cell.” Also TH stands for “table head” or header.

The process for building tables using a CSS style sheet is based on HTML4 language, which uses “paddles” (same as toggles) to outline the table in nearly the same way in which it will be viewed online. Rather than a straight-line format, the CSS website design style sheet defines the table style more specifically and lays it out according to what you will actually see.

CSS table layouts are used to represent relationships between data. The web design writer specifies these relationships in the necessary document language, then coordinates it with basic CSS code (like that used in CSS 2.1). In other words, in order to “see” a table (or a streamlined effect) on the web page, the table is used to achieve good layout design without the constraints of HTML language. The “table-free” look of CSS gives the web page more flexibility and function behind the scenes so that the site visitor can make better use of the table or see content in a more organized and sensible manner.

Web design writers can be very specific and fine-tune the visual format of a table with rectangular cell grids, rows and columns, column groups and borders that make the table pleasing to the eye and easy to understand. Writers may also use CSS to align the data vertically or horizontally within those cells and also within the cells in a row or column.

Inline style properties are used mainly for colors and borders in a table, and are written the same as in any cascading style sheet, but the code is all on one line. The writer will use a semi-colon and a space to separate each table property. For example: [background:#fff; color:#ccc; border: solid black 4px] defines the colors and border of the table.

External web design style sheets work independently in order to link the table to other types of HTML documents on the web site. This allows designers to change the entire appearance of a web design style by altering only one file. It also makes maintenance and updates to the web page faster and easier. An external style sheet must stay in its original location in order not to “break” the link when changes are made to the site.

Cascading style sheets were actually designed to streamline web design tables by adding more eye-appealing texture and easier functionality, meaning the intention was make web page designs “tableless.” The W3C (World Wide Web Consortium) designed CSS to control web design page layout by making HTML necessary only where CSS code won’t work. The CSS controls would make the entire web design page presentable and easy to use.

Good website design demands that there is web browser compatibility across most browsers, such as Explorer, Firefox, Netscape/AOL, Safari, and even Google’s newest “Chrome.”

Those who dislike using tables in website design say that tables are not necessary for user-friendly universal standards and compliance. Dissenters say that HTML tables and CSS web design can be used together for even better site flow and good design structures.

When it comes to pre-planning for SEO techniques for website design, writers must keep one thing in mind: Be very user-friendly and stay on good communication terms with the larger and more popular search engines as noted above.

What that means is that search engines don’t all use the same spider crawling techniques to index their pages. The more search-engine friendly the web site; the more a chance of gaining higher visibility by attaining a higher page rank. The higher the page rank, the higher up on the ladder your web site climbs. The higher up on the ladder, the more of a chance there is that people will view your site before anyone else’s. With millions of web sites readily available, unless you have something no one else in the world does, searchers who are not doing intensive research for business purposes will not likely see your pages unless you are amongst the top two to three pages where they look.

Current website design standards make nearly all browsers compatible with CSS layout functions and design. This also makes it easier for the site designer, who can make global changes without using basic HTML. Website design for people with special needs is also easier, because it eliminates the need for unnecessary jargon. CSS style sheets also make browsing easier for those who use handhelds and mobile phones to surf and browse the Internet.

In all fairness, many of the functionality problems with the use of tables in web design were eliminated when CSS came to power; but both can be used together for maximum effect