The Many Uses of Tables
While the table is a relatively simple HTML element, there's one reason in particular as to why I've held back on explaining it up until this point - its properties allow for designing some rather complex sites! Do you see how this entire site is designed? That sidebar over to the left... that's a table cell! This body of text you're reading... it's in a table cell! Splitting a page into a few sections can help pack a bit more content into the screen, but there are some considerations you must make when designing your site around a table.
To start, never create more than two columns. Any more than two is going to make your website look too overwhelming and turn users away. Furthermore, whether you really need two columns or a table for your page structure at all is going to depend on what exactly it is you're providing. I find a left sidebar with small text most useful for pushing the latest updates to Razorback upfront or providing shortcuts to specific spots within a section of the site.
Even if you're only going to stick to one column, tables could be useful for constricting your site to a certain width like 600 pixels; you can take a look at PowerDVD3000's website to really get an idea of how it would be used that way.
Creating a Normal Table
To really get an idea of how you can use tables, it's best to first use them the way they were originally meant to be used so as to have a visualization of how they're structured. For that, we're going to create a multi-column table containing a list of some common internet protocols. First I'll show you what a typical table looks like, and then break it down.
The code used for a table seems quite large compared to other elements, so you can come back to this later after I explain all the things a table can do and see how you can apply different attributes to your own.
<table border="2" cellpadding="2" cellspacing="2"> <tr> <th>Protocol</th> <th>Port</th> <th>Description</th> </tr> <tr> <td>HTTP</td> <td>80</td> <td>Standard WWW protocol</td> </tr> <tr> <td>FTP</td> <td>21</td> <td>Used for downloading/uploading files</td> </tr> <tr> <td>Telnet</td> <td>23</td> <td>Used for BBS connections over TCP/IP</td> </tr> <tr> <td>SSH</td> <td>22</td> <td>Secure remote Unix login</td> </tr> <tr> <td>HTTPS</td> <td>443</td> <td>Secure WWW protocol</td> </tr> </table>
Seems to be a pretty good use for a table, doesn't it? Also, it's worth nothing that given the entire contents of this site are encapsulated in a table, that table you see above is technically in a table cell, so that should give you an idea that you can put pretty much whatever you want in these things. Of course, there are several new tags you'll need to learn in order to put together a complete table, so let's go over them one by one...
<table> is the outermost container for every HTML table. A number of attributes can be applied to this tag which affect the entire table, such as the border size, cell padding and spacing, and a fixed width if desired.
I figure it's better to just tell you all the attributes that will be of use in early versions of Internet Explorer and Netscape Navigator upfront so you have an idea of what all you can use. You're not going to be regularly defining every attribute in every table.
This sets the border size for the entire table in pixels. This field expects an integer to be specified; 1 or 2 is sensible, but you can also specify a value of 0 if you do not want a border at all. (Most browsers shouldn't render a border by default, but I'd just explicitly state it shouldn't have one just in case that's what you want)
If you're designing a website around a table, you'll almost certainly want to set the border size to 0, as legacy HTML without CSS only offers one kind of border that probably wouldn't blend in well with the site's design.
Something that may be worth pointing out is that the table's border color is bound to the same text color in use, which is why it doesn't simply blend in with the dark background here. You could recolor the table border creating a <font> tag surrounding the entire table. However, this will also set the cell contents to the same color. This is how the table would look if it was enclosed in such a tag setting the color to yellow:
This is used to pad the table cells with some extra space depending on the integer you specify. It's useful for distancing each cell's content away from the borders, making it a bit easier to read as long as the attribute is set to a reasonable size. Padding is applied on all sides of the cell's content.
If cellpadding= is changed to 5, the table looks like this:
As opposed to cellpadding=, cellspacing= doesn't distance cell content from the borders; it merely separates cells further from each other. Again, this takes an integer that's used to determine how far apart the cells are separated in pixels.
If cellspacing= is changed to 5, the table looks like this:
At least some browsers use a cell spacing size of 2 pixels by default, so you could set it to something like 0 if you want to make the table border as thing as possible. With cellspacing= set to 0 and border= set to 1, you should get this:
If your table needs to be as wide as a specific number of pixels, you can use the width= attribute to define this width. Your browser will try to get the table to meet the setting you specify. Do keep in mind that throwing in too many columns, or more likely too large of an image, may force the table to stretch too far beyond the boundaries you've defined.
This is one attribute that can also be applied to a specific table cell. If you need such a cell to be a specific width, as is the case with Razorback's sidebar, some browsers may still be stubborn enough to not follow along with this. My workaround to this is pretty simple - just create a 100% transparent GIF of the exact width you need and place it in the cell. More on that will be discussed in the next and final page.
This can be one of three values: left, center, or right. Over here, I've added align="right" to the table tag. You may see that it's one way to make better use of vertical space on a high resolution, as paragaphs will be placed on the same level as the table while wrapping their words so as to not overlap said table.
If you are targeting low resolution systems, though, do be careful with how you use this attribute, as even the smallest tables may be too wide for a 640x480 display to contain other text beside it, especially in two-column sites.
Moreover, there's no easy way to forcefully move directly below the table after typing up something, as far as I'm away. You could add a bunch of line breaks, but results will vary at different resolutions, so I do not advise trying to do this.
Similarly to setting the color of the HTML body, this sets the background color of an entire table. Table coloring does not work in very early browsers like IE1, which is why I mentioned at the beginning that you should stick to a consistent contrast across the entire page to ensure your site is usable in as many browsers as possible. (IE1 seems to be terrible at handling tables in general)
<tr> is used for containing one row of cells in a table. Although it uses a couple of the same attribute names from <table>, they are used quite differently. bgcolor= with <tr> only colors one row of a table, while align= doesn't move the table to a position for other text to wrap around it.
In the context of <tr>, align= is used to horizontally align the contents of every cell in a row. Possible values are left, center, right, justify, and char. This is what happens when the first non-header row is aligned to the right:
In the event cells take up more than one line of text, it may be desirable to align the contents of every cell in a row to one side. Possible values are top, middle, and bottom. Which setting to use in each row will ultimately depend on your own craftsman judgement.
<td> contains the contents of an individual cell. You can have one or many <td> containers in a single <tr> container; just know that every new <td> tag is an additional column in the entire table. It's best to plan out how your table should be presented, and use whitespace (line breaks, tabs) in your HTML file to more easily manage a table's contents.
<td> uses many of the same attribute names found in <tr> and uses them similarly, except on the level of an individual cell. It also has a few of its own attributes that you should know.
This attribute allows a single cell to span multiple columns. Be mindful of how many columns you intend to put in a table when using this setting, as you may very well want to omit other <td> tags in a row when you do. For example, I'll remove the port number cell from Telnet and have the protocol name span two columns by adding colspan="2" to the cell:
Similarly, rowspan= can be used to have a cell span multiple rows in a table. This should be used with care as well; cells in the same column as the one spanning multiple rows should not exist. This is what our table would look like if one cell were to span three rows:
Notice that the cells specifying ports 22 and 23 do not exist in this new table. When the Telnet and SSH rows come up, the second <td> tag is used to define the contents of the third column for each of them.
width= and height=
The height and width for each cell can be manually defined if desired. Setting the height may not be too useful, but for Razorback's sidebar, I use the width= attribute in combination with an invisible image to guarantee the sidebar will span a certain number of pixels.
<th> is much the same as <td>, except it comes with the convenience of some built-in formatting options that would be useful on the top row of a table. You can technically create the same effect of <th> by centering and enbolding text in each cell in the top row yourself, but it's better to use the shorthand tag provided. <th> tags in a row will be considered the header row.
103 unique views here since April 06, 2021