Sometimes it's useful to arrange information in a tabular format, allowing visitors to your website to read and compare data at a glance. This article discusses how you can create a table for such a purpose, using the free Microsoft Expression Web editor.
I will assume in this article that you already know how to design web pages using Expression Web. It focuses on the task of inserting and customizing a table.
The issue with using a table on websites these days is that people don't only surf the Internet using desktop or laptop computers. They also use mobile phones, which have a very small screen.
By default, when you create a website using my Expression Web tutorial series, you will end up with one that is mobile-friendly. That is, your web pages will automatically adjust to a mobile phone's smaller display, with optional things like the side column shuffled off to the bottom to give the content more space (much like what you see on thesitewizard.com's pages) and the images resized to fit the limited screen real estate.
The trouble with tables is that they have the potential to undo this mobile-friendliness of your site. Think about it. If your table has multiple columns, even if you set it to automatically shrink to fit the screen width, everything in each column will become squashed. The narrow confines of the phone's screen, already hard-pressed to contain a normal web page, will now be required to display every column of your table simultaneously.
So what can we do about this?
One solution is to avoid using tables and display your data in some other way. But this only works for certain types of data. And even then, you lose the advantage of tables, where people can, at a glance, compare the information in one column with that in another.
If your data is such that it can be contained in a very few columns (eg, 2 or 3), and the information is simple so that each table cell does not contain many lines of text, it's possible that the table will still be usable on a mobile phone. That is, your table is so small (width-wise) that when displayed on a small screen, it will look little different from its appearance on a desktop/laptop computer.
If your data is such that you can only present it in a wide table (or you don't want to lose the advantages of such a format), then sometimes the only way is to just go ahead and do it. Your visitors will figure out for themselves that it is best viewed on a desktop/laptop computer.
After all, the medium is meant to serve us, and not we the medium. There are times when being a slave to the lowest common denominator (the mobile phone) means that something important is lost (such as the insight gained when certain data is presented in the columns of a table).
That said, the real-life situation is probably not as dire as I put it. Confronted with an over-wide table, chances are that the more savvy mobile phone visitors will just rotate their phones to its landscape mode. So all is not lost.
Start up Expression Web and open your web page.
Move your text cursor to the spot where the table is to be inserted.
Click "Table | Insert Table" from the menu. That is, click "Table" from the menu bar, followed by "Insert Table" from the drop-down menu that appears.
In the "Insert Table" dialog box that appears, enter the number of rows and columns you want into the "Rows" and "Columns" fields. Note that you can always insert more rows and columns later (and even delete them), so don't worry too much if you are not sure how many you will ultimately need.
By default, Expression Web sets the table to occupy 100% of the screen width (whatever the width of your visitor's browser may be). This is specified by the "100" in the field under the "Specify width" checkbox (see picture below). If this is not what you want, change that number and set the units ("In pixels" or "In percent") accordingly.
If you want the browser to adjust the table to fit your visitors' browsers, you should use percent for your unit, and not pixels. That is, specifying (say) 100% means that the table will always occupy 100% of the browser's window width, no matter what the screen size is. But specifying (say) 800 pixels means that while the table will show up fine on a big screen, it will exceed the width of a smaller one (such as those found on mobile phones).
Cell padding is the space between each table cell. Cell spacing refers to the space between the text (or images) in each table cell and its borders. Adjust those as you see fit.
If you want your table to have no border at all, leave the "Size" field in the "Borders" section at 0. Changing it to 1 will give you a thin line (1 pixel thick) for the border around the table, 2 a thicker one (2 pixels thick). And so on. Note that this number only controls the border around the table, and not the lines between each cell. The colour ("color" in US English) of the border is black by default, but you can change this via the "Color" field.
If you want each cell to be separated from the other with lines (borders), you will have to set it later after you create the table. (See section below.) For now, your cells will not have visible borders between them.
Note that Expression Web comes packaged with numerous designs for tables that are probably decent enough for simple needs. If you are planning to use those designs, you don't have to change anything in the Borders section here, since selecting those designs will automatically override these border settings. Details on how to select the designs are given below.
Click the "OK" button when you are done.
To enter data in a cell, just do the usual (eg, type) while your text cursor is in that cell. Use the TAB key on the keyboard to move from one cell to another. Alternately, you can use the mouse to click the appropriate cell to go directly there.
Expression Web provides a few fancy table designs that you can use without manually creating your own visual styles. Among them are the simple table with grid lines between each cell.
Click to put the text cursor somewhere in the table you want to customize. It doesn't matter which cell. The cursor just needs to be in the table somewhere so that Expression Web knows which table you are referring to in the next few steps.
Click "Table | Modify | Table AutoFormat..." from the menu. This menu item is only available when your text cursor is in a table cell, so if it is greyed out (or disabled), it means that you skipped the first step mentioned above.
In the Table AutoFormat dialog box that appears, you are given several stock designs. You can scroll through the selection offered by moving up and down the list in the "Formats" column on the left. For those who only want a simple grid for your table, scroll down and select "Grid 1".
Click the "OK" button when you are done.
Click to put your text cursor into the cell immediately before or after where the new row or column is to be inserted. (Yes, you can put it either before or after.)
Click "Table | Insert" to bring up a submenu from which you can choose to insert a "Column to the Left", a "Column to the Right", a "Row Above" and a "Row Below". Click the submenu item corresponding to your needs.
A new row or column will appear in the table. If it's a column, it will probably seem very narrow at first, compared to your other cells, since it's empty. However, as you type into it, the cell will automatically resize to accommodate your content.
If your cursor happens to be in the last cell of a table, that is, the bottom right cell, and you hit the TAB key, Expression Web will also automatically extend the table another row and place your cursor in the leftmost cell. This is a quick and easy way to extend the table.
To delete a row or column, click "Table | Delete" and select the appropriate menu item, that is, "Delete Columns" or "Delete Rows".
You can also merge two cells together. First select the 2 cells you want to merge. You can do this by either dragging the mouse over the text in both cells (highlighting them), or by holding down the SHIFT key on your keyboard and using the arrow keys to do the equivalent. Then click "Table | Modify | Merge Cells..." from the menu.
To split a cell into 2, put your text cursor in the cell in question, and click "Table | Modify | Split Cells..." from the menu. The Split Cells dialog box will appear, giving you the option to split the cell vertically or horizontally. Select the appropriate option, enter the number of rows or columns you want the cell split into, and click the OK button.
By default, web browsers (and thus also Expression Web) allocate the amount of space a cell occupies automatically, according to how much content there is in it. This may lead to your columns having uneven widths.
If this is not acceptable, the web editor provides a way in which you can force all the columns to have the same width, using "Table | Modify | Distribute Columns Evenly..." from the menu. Unfortunately, this action precomputes the widths of each column in pixels and converts your entire table to a fixed width, overriding the table size you set earlier when you created the table. To add insult to injury, the new width of the table seems to be derived from its size in the editor's Site View panel.
Since this is not really ideal, use the method below to set the widths manually for each column.
Calculate the width of each column in terms of a percentage of the whole. Since you want each column to be equally wide, this is done by dividing 100 by the number of columns.
For example, if the table has 4 columns, each column should be 25% of the whole table, since 100 divided by 4 is 25. But what if the number of columns cannot cleanly divide 100? My practice is first to divide 100 by that number and round down to the nearest whole number. For example, for a table of 3 columns, I set the first two columns to occupy 33% (since 100 divided by 3 is 33 and one third), and the last column to occupy 34%. If you do it this way, the total is still 100%, since 33 + 33 + 34 = 100, and the columns are still fairly evenly distributed.
Put your text cursor in the topmost cell in the first column of the table.
Click "Table | Select | Column" from the menu. This selects the entire column.
Click "Table | Table Properties | Cell" from the menu.
In the Cell Properties dialog box that appears, click the "Specify width" checkbox to put a tick in it. This will enable the field below. Enter the width you calculated earlier. For example, in a table with 4 columns, enter "25" (without the quotation marks).
Click the "In percent" radio button.
Click the "OK" button.
Repeat the process for each column. That is, put your cursor in the topmost cell of the next column, select the entire column and change its width. And so on, until you have specified the width of every column.
At the end of this process, the columns should have approximately equal widths, without the side effect of your table's width being converted to pixels.
Copyright © 2017-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Insert a Table into a Web Page (and Customize it) with Expression Web
