HTML Advanced: Tables

HTML Advanced: Tables

ables let you display your content in rows and columns, either surrounded by borders or with no borders.

But tables are much more than neatly arranged items. You can use tables to simulate newspaper-style columns, to align forms, or to space items across a page. With a little imagination, the table commands can add formatting strength, beyond simple rows and columns, to your HTML arsenal.

Don’t let the volume of table information frighten you off. Basic tables aren’t difficult at all. There are many features that you can add to tables to make them more complex and powerful, but you needn’t try to learn them all at once.

You’ll build tables with the table tag:


  


    


  



       Contents of table cell
    

Building a Basic Table
This section shows you how to create a basic table. The most basic table uses three simple tags and their matching end tags.

  • starts a table.

    • ends a table.

  • table row, starts a new row.

  • ends a table row.

  • table data, starts a column with a row.

  • ends table data.

To build a table:

  1. Start the table with the

    tag. To make it easier to read your HTML file, put the table tag on its own line:


  2. The table tag has a number of attributes, but the most-commonly-used one is border. With the border attribute you can set borders of any width. If you want a one-unit border, your table tag would look like this:

    3. Note: It is a good idea to always have a border set when you are building tables. The border makes it easier to find errors and problems in your table, simplifying the debugging process. Then, if you don’t want a border in the final table, just delete the border attribute or set its value to zero.


  3. Type a table row tag,

    4. . This tells the browser you are starting the first row. Put the table row tag on its own line to make your HTML text file easier to follow.

  4. Type the table data tag,

    5. You’ll now have a blank cell within the table.

    Spanning Columns
    You can tell a cell to stretch across multiple columns or across multiple rows. This is a handy way to have a table header that identifies two columns of information.

    followed by the first table item:



    :

    Type of Fish

  5. At the end of the item, type the end table data tag,



  6. Type each of the items that you want to appear in the first row. Remember, each item begins and ends with a table data tag:

    7. Type of Fish




  7. When you have typed all the items in the first row, end the row with the end table row tag

    8. :

    Type of Fish Length of Fish





  8. Create as many rows as you need in your table.

    Note: Remember to group together each row in some way that is visually meaningful in your text file. For example, keeping the start and end tags on their own separate lines makes the HTML text file easier to read. Some people indent their table data items. Others add extra spaces between each row. It doesn’t really matter as long as you are consistent and your code is neat and easy to follow.


  9. When the table is complete, end it with the end table tag,
    10. Type of Fish Length of Fish

    .

    This is what the code for a simple table looks like.



        


        





        


        





        


        



    Type of Fish Length
    Guppy .5 inch
    Swordtail 1.5 inch


    Note: An easy-to-make mistake is to leave off the end table tag. When this happens, the browser doesn’t know what to do, so it just stops displaying your page and it looks as if your text has disappeared. If you’re working with tables and part of your page is “gone,” double check that the end table tag is present and correct.

    Rows and Columns

    The number of rows and columns expands dynamically. To add an additional column, just add another table data entry and the browser displays another column. To add another table row, just add another table row set.

    For example, this code generates a table with three columns.













    That’s how simple it is it build a basic table!

    Table Captions and Headings
    There are several optional table tags and attributes that add richness to your tables.

    Adding a Caption
    Guppy Snail Duckweed
    Swordtail Crayfish Waterlily


    You can add a caption to your table. The default caption appears in normal body text, centered, either above or below the table.

    The caption tag must appear immediatly after the table tag and before the first table row tag. As with all other table tags, you must also use an end tag.

    The caption tag has one attribute, align, which tells the browser where to place the caption in relation to the table. When the align value is top, the caption appears at the top of the table. When the align value is bottom, the caption appears at the bottom of the table.

    >











    Table 1.3. Fish and Invertebrates
    Guppy Snail
    Swordtail Crayfish

    Adding Headers

    Often, you want to put headers on your table. You could create individual cells and make them bold and centered. Or you could use the table header,

    		, tag. The table header tag works just like a table data tag, except it automatically puts the items in bold and centers them.














    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish


    Adding Text Formatting

    Italic Text here




    You can include almost every HTML formatting tag you use elsewhere in a page within a table. For example, to make the names of the fish italic, just add the bold text tags. In this example, the bold tags are noted in color so that you can see them more easily.












    Guppy Snail Duckweed
    Swordtail Crayfish Waterlily


    Aligning Text in a Table

    You can align text in different ways within a cell. The align attribute lets you align the cell contents horizontally. The valign attribute lets you align the cell contents vertically.

    You can use the align and valign attributes with the table header (th), the table data (td), and the table row (tr) tags. If you use these attributes with the table header or table data tags, the alignment is in effect only for that cell. If you use these switches with the table row tag, the alignment is in effect for all the cells in that row.

    This table shows the different alignment options:

    tagwhat it doeshow it looks


     

    align to the left side of the cell

    		Mercury


     

    align to the center of the cell

    		Venus


     

    align to the right side of the cell

    		Earth


     

    vertically align to the bottom of the cell

    		Mars


     

    vertically align to the middle of the cell

    		Jupiter


     

    vertically align to the top of the cell

    		Saturn

    Aligning text within a cell helps you create neater, easier to read tables.































    Water Creatures
    FRESHWATER
    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish
    SALTWATER
    Clown fish Anemone
    Trigger fish Starfish


    Adding Images


    It’s easy to use an image within a table. Simply type the image tag instead of text within a table data cell.

















    Fish
    Guppy
    Clownfish
    Swordtail


    Adjusting Table Cells
    You can control the size and shape of your table’s cells, as well as the the position of data within them. Some of these table features, especially cell padding and cell spacing, which are covered in the next pages, can be very useful page layout tools when you are using the table tags as design tools.

    Preventing a Line Break

    Normally, the width of table cells is calculated by the browser. The contents of a cell break and wrap as needed. You can, however, tell the browser to not break a line. You do this by including the no wrap, nowrap, attribute with either the table header or table data tag.

    This sounds obvious, but make sure that if you tell the browser not to break a line, that the line isn’t too long or you’ll end up with an odd, too-wide cell.

    In the example below, the first column contains normal table data. The second column contains table data with the nowrap switch set.










    Fred Smith

    John Jackson

    Roberta Ellery

    Mona Jones

    Delta Mason    		 http://www.bigcompany.sales.com/southwest.html
    Kathy DiLeon

    Jason Montcliff

    Trip Nelson

    Mike Martin

    Lila White

    Eddy Bills     		http://www.bigcompany.sales.com/southeast.html


    Using Blank Cells
    Blank cells can be very useful when building a complex table. They act as spacers, placeholders, and positioning elements.

    To create a blank cell:

    1. Type the table data tag.

  10. Add attributes to set the size of the cell (the next section of this lesson gives you details on cell and row spanning). The example code below sets a cell that is four rows deep and two columns wide.

  11. Type the non breaking space character. This character is represented by an ampersand, the letters nbsp, and a semi-colon, with no spaces in-between.

    		12.  

  12. Finally, end the table data cell.

    		13.  

    Sometimes you want the data in a cell to span across several columns or even across the whole width of the table. You can do this with the colspan switch. You can use the colspan attribute with either a table header or a table data tag.

    This code tells the table to span the table header across five columns:

    This code tells the table to span the table data cell across two columns.























    <









    Water Creatures
    Freshwater
    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish
    Saltwater
    Clown fish Anemone
    Trigger fish Starfish


    Spanning Rows

    You saw how the colspan switch makes a row stretch over multiple columns. But what if you want a column to have a depth of several rows? Well, that’s when you use the rowspan attribute.

    As with the colspan attribute, you can use the rowspan attribute with either the table header or table data tag. You specify the number of rows deep you want the column to be. For example:

    This code tells the table to span the table data cell across three rows, making it three rows deep:




























    Water Creatures
      Fish Invertebrates
    Freshwater Guppy Snail
    Swordtail Crayfish
    Saltwater Clown fish Anemone
    Trigger fish Starfish


    Note: When we changed the table to have rowspanning cells, you’ll see that we had to change a few other things, too.

    • We added a third column. So we had to change the colspan value in the table header to three columns.

    • We wanted the Fish and Invertebrate heading to line up with the appropriate columns, so we needed to insert a blank table data cell.

    • Finally, we added the Freshwater and Saltwater cells, each spanning two rows.

    Tracking changes like these is what can make tables challenging. If you are doing a lot of table work, you may want to look at some of the WYSIWYG editors on the market.

    Spacing and Padding
    You can add space between each table cell. This is called cell spacing. You can also add space between the border of the cell and the cell’s content. This is called cell padding.

    Adjusting Cell Spacing

    Cell spacing defines the amount of space between cells in your table and, if the border is on, creates some interesting border effects. The default value varies from browser to browser so if you are looking for complete control over how your table displays, you should set this value. If it is 0 there is no extra spacing.

    Cellspacing is an attribute of the table tag and is in effect for the entire table.

    For example, this code sets a cellspacing of 5 units:

    In the example below, the first table uses a cellspacing value of 5.














    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish


    This code uses a cellspacing of 20.














    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish


    Adjusting Cell Padding

    The cell padding attribute lets you specify the space between the border and the contents of cells in the table. The default value varies from browser to browser so if you are looking for complete control over how your table displays, you should set this value. If it is 0 there is no extra padding.

    For example, this code sets a cellpadding of 5 units:

    In the examples below, the first table uses a cellpadding value of 5.














    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish


    This code uses a cellpadding of 20.














    Fish Invertebrates
    Guppy Snail
    Swordtail Crayfish


    Width, Rules

    Netscape Navigator 4X and later and Microsoft IE3X and later offer some additional controls over table and cell size, and borders through new attributes in the table tag, width and rules. If you are reading this section and don’t see the expected effects, your browser may not support them.

    Table Width




    You can specify the width of a table or the width of a table cell. There is some inconsistency across browsers in how this attribute is implemented, so be sure to do cross browser testing if you are relying on it.

    You specify the width as either a specific number of pixel or as a percentage of the page or the table. When you specify a set size, the table or table column remains that size no matter how your reader scales the browser window. When you specify a percentage, the table or table column scales with the browser window. Unless you are reasonably certain that your readers are using a certain size screen, or you want your table or column to be a fixed size, you’re better off specifying width as a percentage.

    Note: No matter how you’re specifying table width, each table has a minimum size and it will never display smaller than that size. The minimum size is calculated by the length of the longest single word in each cell. In the examples below, we can try to set the width at 50 pixels or 2 percent of the browser window, but the table will never display that small because the words Swordtail, Invertebrates, Waterlilies, and Flakes together add up to a minimum table width.

    To set a width for your table:

    1. Start the table command as you normally would.

    2. Type the width attribute and an equal sign.

    3. Type the number of pixels wide you want your table. Or, type the percentage of the screen you want the table to fill, followed by a percent sign. In this example, the table will fill 75 percent of the screen’s width:

    4. Continue building your table as you normally would. Column widths are automatically calculated based on the table’s width, unless you specify a column width in a table definition tag. In this example, the table will fill 75 percent of the screen’s width, and the first column will fill 50% of the table’s width:


      5. In the example below, the first table has a fixed width of 500 pixels. It does not resize to fit into the browser window. In the second table, the table’s width is set to be 75% of the browser window and the first column is set to be 25% of the table’s width.

      Description of the problem:



















      Fish Invertebrates Plants Food & Nutrients
      Guppy Snail Duckweed Flake
      Swordtail Crayfish Waterlily Pellet


      In this table, if you change the size of your window, the table width and the column width both rescale to adapt to the window’s new size.




















      Fish Invertebrates Plants Food & Nutrients
      Guppy Snail Duckweed Flake
      Swordtail Crayfish Waterlily Pellet


      Turning Rules on and Off

      If your readers are using Microsoft Internet Explorer 3.X or later, or Navigator 4.X or later, you can show them a table with different divider rules turned on or off. You do this by adding the rules attribute to the table tag.

      In the examples below, the first table gives the rules attribute a value rows to display only the row divider rules. In the second table, the rules attribute value is cols to show only the column dividers. In the third the rules attribute value is none to turn of the rules.










      Fish


      		Invertebrates


      Guppy Snail
      Swordtail

      		Crayfish


      This table displays column rules only:










      Fish


      		Invertebrates


      Guppy Snail
      Swordtail

      		Crayfish


      This table displays no rules:










      Fish


      		Invertebrates


      Guppy Snail
      Swordtail

      		Crayfish


      Table Color, Background

      Netscape Navigator 4X and later and Microsoft IE3X and later offer some additional controls over table and cell size, and borders through new attributes in the table tag, width and rules. If you are reading this section and don’t see the expected effects, your browser may not support them.

      • The bgcolor attribute can be added to any of the table tags except for the caption tag. It lets you specify a background color for the entire table, full row, or individual cell.
      • The background attribute can be added to any of the table tags except for the caption tag. It lets you specify a background image for the entire table, full row, or individual cell.

      Adding Color

      You add color to a table in much the same way you add color to a background or to text: by using the bgcolor attribute. You can include a the bgcolor attribute in any of the table tags, except for the caption tag.

      In the examples below, the first table sets a bgcolor for the entire table. The second sets a bgcolor for a specific row. The third sets a table cell color.

      This code specifies that the table background be a dark green:













      /

      Fish Invertebrates
      Guppy Snail
      Swordtail Crayfish


      This code specifies that the table row be purple. A color attribute in a table row tag overrides any color attribute in the table tag for that specific row:













      /

      Fish Invertebrates
      Guppy Snail
      Swordtail Crayfish


      Inserting the attribute into a table data or a table header tag sets a background color for a single cell. This code specifies that one table cell be tan and another salmon. The cell color always overrides the row or table color for that cell.













      /

      Fish Invertebrates
      Guppy Snail
      Swordtail Crayfish


      Adding Background Images

      You add a background image to a table in much the same way you add a background image to a page: by using background attribute. You can include a the background attribute in any of the table tags, except for the caption tag.

      In the examples below, the table as a whole has one background, the row has another, and the cell has a third.

      >











      and each row requires a closing

      . Make sure you haven’t overlooked one.

      Common Problem #2: Missing Quotation Mark
      If you are using table attributes, make sure that all quotation marks around values open and close. There’s nothing like a missing quote to cause odd-looking problems.

      Common Problem #3: Nesting Confusion
      Nested tables just cry out to cause problems. When you have nested tables it is very easy to lose track of matching pairs and to remember which level of table you are on. Use comment lines to help mark-up where tables start and end, to minimize potential pitfalls.

      Common Problem #4: Good Old Typos
      The tag isn’t working as you expected. Go back to your file and double check for old fashioned typos. It’s almost embarrassing how often a

      can slip a little and become a tag instead. The browser just ignores that alien tag because it doesn’t understand it?and gives you mismatched table tag errors.

      Common Problem #5: Inconsistent Standards Support
      The tag isn’t working as you expected. Guess what? It might not be your fault at all! For some reason, tables seem to be an area in which the browsers have many tiny inconsistencies. Different dot releases of the same version even have little differences. Default values are different. When in doubt, do a cross-browser check to see if your table works in one place and not the other. Set values for key attributes, especially padding and spacing.

      Share the Post:
      data observability

      Data Observability Explained

      June 8, 2023

      Data is the lifeblood of any successful business, as it is the driving force behind critical decision-making, insight generation, and strategic development. However, due to its intricate nature, ensuring the

      Heading photo, Metadata.

      What is Metadata?

      June 1, 2023

      What is metadata? Well, It’s an odd concept to wrap your head around. Metadata is essentially the secondary layer of data that tracks details about the “regular” data. The regular

      Show More
      Linkedin Twitter

      ©2023 Copyright DevX - All Rights Reserved. Registration or use of this site constitutes acceptance of our Terms of Service and Privacy Policy.

      Sitemap

      Fish Invertebrates
      Guppy Snail
      Swordtail Crayfish<

      Note: In modern HTML development, use of the background attribute is no longer supported, and you should use the style attribute’s background-image property or define a CSS class style instead to apply formatting to elements. For example:

         
           
           This table uses a Linux Penguin logo      as its background image.

      The table looks like this:

      This table uses a Linux Penguin logo as its background image.

      Nesting Tables


       


       


       



      <--!--comment here, begin nested table-->
         


          


          


          


         


          


      <--!--comment ends here, nested table ends here-->
       

      Nesting tables within tables lets you create some complex effects from just basic HTML table tags. Nesting tables places one table inside of another. To nest a table, start the table as you normally would. When you come to the cell into which you want to place the nested table, enter the table data tag. Then, instead of typing the contents of the cell as you normally would, start the nested table. The table becomes that cell’s content. After you end the nested table, be sure to end the table cell it is in with the <,/td> tag.

      This table was built by nesting tables inside one another. We’ll be the first to tell you it isn’t a terribly attractive table, but it shows how you can place tables within tables.

      FishInvertebrates
      Guppy
      FanciesPlain
      BlueYellow
      GreenOrange
      		Snail
      RegularLarge

      This is another example of three nested tables. This table incorporates both images and text:

      Aquarium AnimalsFishInvertebrates
      Guppy
      Fancies

      		Plain

      Snail

      RegularLarge

      Nesting tables can lead to complex tables — which are both visually interesting and have the potential of introducing errors. One of the most common HTML errors is a missing or misplaced table tag.

      If you are nesting tables, be sure to track your start and end table tags. Arrange your text file in a way that is as clear and easy to follow as possible, using comment lines as necessary. Remember, a comment line is a tag that starts with the . character and ends with the — > characters, like this:


      Common Problems
      Tables are a hotbed of oops, slips and uh-ohs. If you are doing a lot of table work you might want to investigate one of the WYSIWYG editors to make your work easier. If part of your page disappears or if items which should be inside the table pop out to the bottom of the table, you have an error in your table code. Don’t panic! Just walk through your table, taking deep breaths, and you’ll find the error.

      Common Problem #1: Missing End Tag
      It is very easy to leave off a closing tag within a table, especially a larger table with many cells. Each of those cells requires a closing