• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 12. Editing the Code > Using the Tag Selector

Using the Tag Selector

The Tag Selector enables you to jump quickly through a hierarchy of HTML tags, depending upon what is active, or selected, in the document window. This tool begins with the <body> tag and outlines the structure of the tags to the selection. This can be very useful for quickly selecting an item, particularly if it is one that may be difficult to select in the document window.

In the lighthouse_history.html file, click anywhere inside the white cell of the nested table that contains the text and images for this page.

Nested tables are particularly hard to select in the document window. You can't easily grab the border of a nested table, especially if the borders are defined as 0. The first step is to place the cursor at a point in the hierarchy of the HTML code that is after the desired table tags.

Using the Tag Selector at the bottom of the document window, Control-click (Macintosh) or right-click (Windows) the <table> tag that is second from the right.

This <table> tag corresponds to the table that creates the outline effect. This table is the wrong size. The width is 548 pixels, but it should be 558 pixels. The cell padding value is also wrong, which is causing the black outline that should be around the white area to not appear.

You've worked a little bit in the previous lessons with the Tag Selector. The more you get familiar with the hierarchy of HTML code, the easier it will be to move immediately to the point in the code that you need. The Tag Selector menu gives you additional control and quick access to the tags in the HTML.

In the menu that appears, choose Edit Tag.

A small Edit Tag box appears near the Tag Selector with a text field containing the <table> tag and the attributes contained within that tag. In the text field, you should see the following:

							<table width="548" border="0"cellspacing="0" cellpadding= "0">

In the Edit Tag box change the width to 558 pixels and the cell padding to1.

The resulting code should appear as follows:

							<table width="558" border="0" cellspacing="0" cellpadding="1" >

Press Return (Macintosh) or Enter (Windows).

The changes that you defined are now made to the document, and the Edit Tag box disappears.


The Tag Selector menu also allows you to remove tags.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint