Every web designer knows only too well the importance of organizing web content in a presentable manner. Presentability is key in enabling visitors find information on your site with ease. As a matter of fact, good content organization is one of the features of a website that make a visitor want to stay on your site in addition to maintaining the traffic that you already have.

The use of tables to organize information on a site is not a new concept to the web design world. It is especially important in sites that have a lot of information. Tables in web design are commonly used as grid or matrix and they work great in a site that has pictures as they help keep the text in line with the pictures. In instances where you have pictures of varying sizes, tables are a good way to make the page look organized. The use of tables within tables is also a common phenomenon in web design in order to ensure that all the content is lined up and separated neatly.

HTML tables sometimes look complex but in reality, they are just made up of simple components. Insertion of a HTML table begins with the use of the table tag. Tables are made up of rows and columns so you use tags to start a new cell, to end a cell, to start a new row, to end a row and to end the table. The browser makes the table in proportion to the content in that the table is as small as possible but big enough to fit the content so that as little as possible space is wasted. In case you want to enlarge your table, you can increase the width by hard coding the width you want in pixels or percentages. However, even as you adjust the width of the table, make sure it is optimized for all screen resolutions lest it appears distorted in some screen resolutions. One way you can do this is by coding the width of a cell as a percentage of the whole table or using fixed pixel width for the table.

Alignment of text and other content in tables can be configured according to designer’s preferences. Usually, if the contents in the cell of your table have varying sizes, text in the smaller cells is aligned at the centre. However, you might want to fix the vertical alignment especially if you have different type of content for example a text description in one cell and an image in the next. If this does not come out the way you want, you can play around with the alignment until you get something that looks good.

When it comes to table borders, most browsers fix by default, a 1 pixel wide border all around the cell. You can customize this function to thicken the border or create a table without borders just by coding for the relevant function. You can also customize the color of the table; something that is best done using hexadecimal color codes. In summary, the only limit to customizing your table to look nice is your imagination.