Home

HTML Tables

   

Fundamentals of Tables

 

Introduction

A table is a two-dimensional list of items arranged in columns and rows. Each value of the table is put at the intersection of a column and a row.

To initiate a table, create an element named table:

<table></table>

The Rows of a Table

A row is a horizontal arrangement of items. A row is created using a tag named tr. The tr element must be nested in a table element. Here is an example:

<table><tr></tr></table>

In the same way, you can create as many rows as you want.

The Colums of a Table

A column is a vertical arrangement of items. A column is created using a tag named td. The td element must be nested in a tr element (which, remember, itself must be created inside a table element). Here is an example:

<table><tr><td></td></tr></table>

In the same way, you can create as many rows as you want as long as you remember to nest each row in a tr element.

To make your code easy to read and manage:

  • You should put the start and the end tags of the table each on its own line. Here is an example:
    <table><tr><td></td></tr>
    </table>
  • Each start tag of the row should start on its own line and it should be indented from the table element. Here is an example:
    <table>
      <tr><td></td>
      </tr>
    </table>
  • If necessary (you will judge for yourself, with experience), each start tag of the column should start on its own line and it should be indented from the tr element. Here is an example:
    <table>
      <tr>
        <td></td>
      </tr>
    </table>

A Value in a Table

In a traditional table of a database or a spreadsheet, a value is created at the intersection of a column and a row. In HTML, a value in a table is created in the td element. This means that a value is created between the start tag and the end tag of the td element. When specifying a value in a cell, of course the value can be anything, including text. Here are examples:

<html>
<head>
<title>Road System Database</title>
</head>
<body>

<table>
  <tr>
    <td>Road System Database</td>
  </tr>
</table>

&nbsp;

<table>
  <tr>
    <td><b>Road Name</b></td>
    <td><b>Road Type</b></td>
  </tr>
  <tr>
    <td>MD 410</td>
    <td>Road</td>
  </tr>
  <tr>
    <td>I-81</td>
    <td>Interstate</td>
  </tr>
  <tr>
    <td>US 75</td>
    <td>Road</td>
  </tr>
</table>

</body>
</html>

This would produce:

A Value in a Table

The Characteristics of a Table

 

Introduction

As it is traditionally done with HTML elements, the characteristics of a table are set using the attributes of its start tag. You might have realized that the table element means nothing unless rows and columns are added to it. On the other hand, some characteristics set on the table as parent will affect the columns and the rows (and actually vice-versa).

A table has some other characteristics available through its attributes. Still, it is recommended that you set some or most of its characteristics using CSS.

  • Most attributes are optional, but in most circumstances, some tags absolutely need one or more attributes in order to have any significant meaning
  • Some tags (almost) require attributes. Such tags mean nothing in the absence of their attribute(s). This means that you can omit the attribute(s) and nothing would happen
  • The names of all attributes are based on HTML standards. The values of some attributes are provided or defined in HTML. The values of many other attributes must be created from external languages (JavaScript, CSS, etc). This means that adding an attribute is not enough: another language can (must) define the role of such an attribute. In our HTML lessons, we review only the tags that do not require an attribute from an external language
  • Most attributes are appropriate for only some tags. This means that some attributes have no effect when used in the wrong tag

The Border of a Table

By default, a table is transparent and doesn't show its limits. To let you show the borders of a table, the table start tag has an attribute named border. This attribute can be left empty or it can have a natural number (0, 1, 2, etc). Here is an example:

<html>
<head>
<title>Road System Database</title>
</head>
<body>

<table border="0">
  <tr>
    <td><p><b>Road System Database</b></p></td>
  </tr>
</table>

&nbsp;

<table border="5">
  <tr>
    <td><b>Road Name</b></td>
    <td><b>Road Type</b></td>
  </tr>
</table>

</body>
</html>

This would produce:

The Border of a Table

The border attribute is optional. If you don't specify it, the table would behave as if the border was set to 0. Here is an example:

<html>
<head>
<title>Road System Database</title>
</head>
<body>

<table>
  <tr>
    <td><p><b>Road System Database</b></p></td>
  </tr>
</table>

&nbsp;

<table border="5">
  <tr>
    <td><b>Road Name</b></td>
    <td><b>Road Type</b></td>
  </tr>
</table>

</body>
</html>

The Width of a Table

A table has a size. The horizontal measurement of the table is its width. The width is created as an attribute named width to the table. The width can be provided as a fixed natural numbers or as a relative value:

  • If you want the table to cover a fixed width, set the value of the width attribute to a constant number
  • If you want the table to cover the whole width from where it is (such as from the left side of the monitor if the table is directly created in the body element) to the right border of its parent), set the width value to 100%
  • If you want the table to cover only a relative portion of the width from where it is (such as from the left side of the monitor if the table is directly created in the body element) to the right border of its parent), set the width (or the height) value to a percentage value, such as 75% to cover 3/4 of the width

Practical Learning: Setting the Widths of Columns

  1. Open the offices.htm file
  2. Change it as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, office, location">
    <meta name="description" content="This webpage presents the way to contact Watts A Loan.">
    
    <title>Watts A Loan: Offices Locations</title>
    
    <head>
    <body>
    
    <div align="center">
    
    <h1 align="center">Watts A Loan: Offices Locations</h1>
    
    <p><b>Watts A Loan</b> has offices in Montgomery County, Prince Georges County, 
    Baltimore, and Howard County.</p>
    
    <h3><u>Montgomery Mall Office</u></h3>
    
    <table width="300" border=1>
      <tr>
        <td><b>Watts A Loan - Montgomery Mall</b></td>
      </tr>
      <tr>
        <td>822 Rocket Star Ave<br>
            Bethesda, MD 20817</td>
      </tr>
    </table>
    
    <u><h3>Upper Marlboro Financial District</h3></u>
    
    <table width="300" border=1>
      <tr>
        <td><b>Watts A Loan - Financial</b></td>
      </tr>
      <tr>
        <td>10715 Long Journey Rd<br>
            Upper Marlboro, MD 20772</td>
      </tr>
    </table>
    
    <h3><u>Baltimore Commercial Town</u></h3>
    
    <table width="300" border=1>
      <tr>
        <td><b>Watts A Loan - Commercial Town</b></td>
      </tr>
      <tr>
        <td>6915 Sonnett Blvd<br>
            Baltimore, MD 21217</td>
      </tr>
    </table>
    
    <u><h3>Columbia Town Center</h3></u>
    
    <table width="300" border=1>
      <tr>
        <td><b>Watts A Loan - Columbia Town Center</b></td>
      </tr>
      <tr>
        <td>6204 East Patuxent Rd<br>
            Columbia, MD 21042</td>
      </tr>
    </table>
    
    <hr width="960">
    
    <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="https://www.sba.gov/" target="_top">Small Business Administration</a></p>
    </div>
    
    </body>
    </html>
  3. Save the offices.htm file
  4. Preview the file in a browser

    The Width of a Table

    After viewing the webpage, return to your text editor

The Height of a Table

A table has a size, represented by the width and the height attributes of the table element. The values can be provided as fixed natural numbers or as relative values:

  • If you want the table to cover a fixed width (or height), set the width (or the height) value to a constant number
  • If you want the table to cover the whole width (or the whole height) from where it is (such as from the left (or the top) side of the monitor if the table is directly created in the body element) to the right (or the bottom) border of its parent), set the width (or the height) value to 100%
  • If you want the table to cover onlya relative portion of the width (or the height) from where it is (such as from the left (or the top) side of the monitor if the table is directly created in the body element) to the right (or the bottom) border of its parent), set the width (or the height) value to a percentage value

The Characteristics of the Cells of a Table

 

The Width of a Cell

The width of a cell is the width of a column under which the cell exists. To support the width of a cell, the start tag of the td element uses its own width attribute.

The Height of a Cell

The height of a cell is the distance from its top to its bottom border. The height of a cell is controlled using the height attribute of the start tag of the td element.

Practical Learning: Setting the Height of a Row

  1. From the root of the website, open the index.htm file
  2. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, watts a loan, wattsaloan">
    <meta name="description" content="This is the corporate website of Watts A Loan, a small business that provides loans and financial services.">
    
    <title>Watts A Loan</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td>&nbsp;</td>
          <td>
    
            <h1 align="center">Watts A Loan</h1>
    
            <p>Welcome to <b>Watts A Loan</b>. We provide personal and business loans as well as various financial services. We are your one-stop shop for all types of financial needs.</p>
    
          </td>
          <td>&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
        <p>Our customers include:</p>
    
        <ul>
          <li>Individuals:
            <ul>
              <li>Personal loans</li>
              <li>Boat purchase</li>
              <li>Vehicle financing</li>
              <li>Musical instruments purchase</li>
            </ul>
          </li>
          <li>Businesses:
            <ul>
              <li>Business startup
              <li>Business improvement
              <li>Late payroll
              <li>etc
            </ul>
          </li>
    
          <li>Organizations: Non-government organizations, Not-For-Profit organizations, limited liability needs, etc.</li>
        </ul>
    
        <p><b>Watts A Loan</b> is involved in community outreach activities, such as</p>
    
        <ul type="square">
          <li>Road clean-up</li>
          <li>Events sponsoring
            <ul>
              <li>Marathons</li>
              <li>Little league baseball</li>
              <li>Community farmers</li>
            </ul>
          </li>
          <li>School supplies purchase</li>
        </ul>
    
        <p>The goal is to make <b>Watts A Loan</b> accountable to the community and the environment by following the strict rules of <a href="http://www.federalreserve.gov/bankinforeg/reglisting.htm">government regulations</a>.</p>
    
        <hr>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="process.htm">Loan Process</a> | <a href="services/index.htm">Services</a></p>
            
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    <p><a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="process.htm">Loan Process</a> | <a href="services/index.htm">Services</a></p>
    
    </body>
    </html>
  3. Save and close the index.htm file
  4. Open the process.htm file
  5. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, process, step">
    <meta name="description" content="This webpage describes the process of applying or getting a loan from Watts A Loan.">
    
    <title>Watts A Loan: Loan Process</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960" border="0" border=1>
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 align="center">Loan Process</h1>
    
            <p><b>Watts A Loan</b> makes it very easy and fast to apply for a loan, get approved, 
    and receive your money.</p>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" border="0" border=1>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h3>Personal Loans</h3>
    
            <p>Our core business is based on personal loans. The simple steps to apply for a loan are:</p>
    
            <ol>
              <li>Contact us by calling our number or coming to one of our offices. We are 
    conveniently located near you</li>
              <li>Fill out a short and easy-to-follow application. Of course, our employees are 
    at your service to assist you</li>
              <li>Wait for one of our loan officers to contact you. Most applications are 
    processed the same day and the decision is time because we are very sensitive with 
    urgent situations</li>
              <li>Once a decision is made, if the loan is approved, you will sign a few documents 
    for the loan payment and then you will receive a check either in the exact amount 
    you requested or the amount we thought is more suitable</li>
            </ol>
    
           <h3>Purchases</h3>
    
           <p>As opposed to applying for a loan directly through us, you may want to 
    purchase an item (such as a musial instrument, a boat, a car, a motorcycle, a 
    lawnmower, anything). 
    <b>Watts A Loan</b> has a partnership with many local and domestic companies that sell 
    cars or various types of machines and all types of devices. The steps to apply for a 
    purchase are:</p>
    
    <ol>
      <li>Contact the seller or just go to their company</li>
      <li>Select the desired item to choose and get the price</li>
      <li>Fill out the application. All those companies have their appropriate loan/purchase 
    application</li>
      <li>Wait for an answer. Most applications are processed in a matter of minutes and a 
    decision is made right away
        <ul>
          <li>If the loan is approved, you will sign a document for the loan payment and you 
    will receive the machine or object you applied for</li>
          <li>If something did not work as expected, you will receive a response and possibly 
    an explanation</li>
        </ul>
      </li>
    </ol>
    
    <h3>Business Loans</h3>
    
    <p>We make it convenient to apply for the right loan that will help your business meet 
    a timely requirement or purchase that valuable machine. We have various types of 
    packages or we can customize one for your particular needs. We support:</p>
    
    <dl>
      <dt>Budget Constraint Needs: We can help you to fill that sudden gap in your budget. We meet issues related to:</dt>
        <dd>Cash Flow: A whole in your cashier box is not a negative sign for us and we 
    will deal with it</dd>
        <dd>Deficit: Whether caused by slowness based on seasonal work or a decrease in your 
    sales, a deficit should not slow you down. We will make the necessary payments</dd>
        <dd>Unaccountable Business Partners: Business partners may let you down. We won't</dd>
      <dt>Payroll: We have the right amount to achieve your payroll at the last minute. We 
    are quiet familiar with:</dt>
        <dd>Employees Concerns</dd>
        <dd>IRS Deadlines</dd>
    </dl>
    
    <p>We will analyze your situation and come up with the right package for you. Just contact 
    us today. We can even come to your office or to meet with you anywhere.</p>
    
    <p>Good luck and count on <b>Watts A Loan</b> to meet your financial needs</p>
    
    <hr color="blue">
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50" border="0" border=1>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
    <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  6. Save and close the file
  7. Open the products.htm file
  8. Edit the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, product">
    <meta name="description" content="This webpage describes the products provided by Watts A Loan.">
    
    <title>Watts A Loan: Products</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 align="center">Watts A Loan: Products</h1>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
    <p>Personal loans present various types of reasons to solve immediate and 
    insurmountable problems. <b>Watts A Loan</b> is the premier stop to address 
    such personal issues in a timely and up-to-the-point manner. Besides 
    personal loans, <b>Watts A Loan</b> provides many more solutions.</p>
    
    <h3>Personal Loans</h3>
    
    <p>Financial needs surround us and surprisingly sometimes arrive at a 
    critical time. <b>Watts A Loan</b> has previous experience on such issues 
    as house remodeling, family urgent matters (funeral, graduation, school 
    project, etc) uncontainable debt, bond posting, IRS past taxes, etc. Are 
    you in immediate need for cash? Do you urgently need financial assistance? 
    Contact us immediately and come directly to one of our offices</p>
    
    <h3>Business Loans</h3>
    
    <p> A good business must always be ready to seize an opportunity or to 
    make payments on time. Most of those situations require cash. A reliable 
    business always needs to keep cash in hand. Unfortunately, cash is not 
    always available at the right time, or the amount needed to solve an 
    important problem is not completely available. What do you when in 
    problem? Call us or drop to our office and we will carefully address 
    your concerns.</p>
    
    <hr color="blue">
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50" border="0">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  9. Save and close the file
  10. From the services folder, open the index.htm file
  11. Edit the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, service">
    <meta name="description" content="This webpage describes Watts A Loan services and other corporate activities.">
    
    <title>Watts A Loan: Services</title>
    <head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <br>
    
            <h1 align="center">Services</h1>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
    <p>Besides providing personal and business loans, <b>Watts A Loan</b> 
    is committed to its communities and the environment.</p>
    
    <p><a href="outreach.htm">Community Outreach</a></p>
    
    <p>Events Sponsorship</p>
    
    <p>Support to Local Schools</p>
    
        <hr color="blue">
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
    <table width="960" height="50">
      <tr>
        <td width="10">&nbsp;</td>
        <td>
    
    <p align="center"><a href="../index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a></p>
    
        </td>
        <td width="30">&nbsp;</td>
      </tr>
    </table>
    </div>
    
    </body>
    </html>
  12. Save and close the services/index.htm file
  13. From the services folder, open the outreach.htm file
  14. Edit the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, community, outreach">
    <meta name="description" content="This webpage describes the community activities in which  Watts A Loan is involved.">
    
    <title>Watts A Loan: Community Outreach</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <br>
    
            <h1 align="center">Watts A Loan: Community Outreach</h1>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p><b>Watts A Loan</b> is seriously involved in the communities where its offices 
    are located. In recent years, <b>Watts A Loan</b> invested in the purchase of 
    school supplies for various institutions in the area. <b>Watts A Loan</b> also 
    participated in the sponsoring of a 5K marathon.</p>
    
            <hr color="blue">
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="../aboutus.htm">About Us</a> | <a href="../offices.htm">Offices Locations</a> | <a href="http://managementhelp.org/businessfinance/#anchor1860217" target="_blank">Financial Management</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  15. Save and close the services/outreach.htm file

Operations on a Table

 

Spanning Many Columns

In most tables, every columns has the same number of cells under it. Sometimes you want one row to have be wider than other rows under the same column without having resorting to create another table. If a cell's width covers more than one cell under it, the cell is said to span the cells under it.

To support the spanning of cells, the td tag is equipped with an attribute named colspan. The value of this attribute is the number of cells it spans. Here is an example:

<html>
<head>

<title>Watts A Loan: Offices Locations</title>

<head>
<body>

<table width="300" border=1>
  <tr>
    <td colspan="2"><b>Watts A Loan - Montgomery Mall</b></td>
  </tr>
  <tr>
    <td width="50%">Office #</td>
    <td>240-469-4804</td>
  </tr>
  <tr>
    <td>Fax #</td>
    <td>240-469-4826</td>
  </tr>
</table>

</body>
</html>

Practical Learning: Spanning Some Cells

  1. Access the offices.htm file
  2. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, office, location">
    <meta name="description" content="This webpage presents the way to contact Watts A Loan.">
    
    <title>Watts A Loan: Offices Locations</title>
    
    <head>
    <body>
    
    <div align="center">
    
    <h1 align="center">Watts A Loan: Offices Locations</h1>
    
    <p><b>Watts A Loan</b> has offices in Montgomery County, Prince Georges County, 
    Baltimore, and Howard County.</p>
    
    <h3><u>Montgomery Mall Office</u></h3>
    
    <table width="300">
      <tr>
        <td colspan="2"><b>Watts A Loan - Montgomery Mall</b></td>
      </tr>
      <tr>
        <td colspan="2">822 Rocket Star Ave<br>
                      Bethesda, MD 20817</td>
      </tr>
      <tr>
        <td width="50%">Office #</td>
        <td>240-469-4804</td>
      </tr>
      <tr>
        <td>Fax #</td>
        <td>240-469-4826</td>
      </tr>
    </table>
    
    <u><h3>Upper Marlboro Financial District</h3></u>
    
    <table width="300">
      <tr>
        <td colspan="2"><b><b>Watts A Loan - Financial</b></td>
      </tr>
      <tr>
        <td colspan="2">10715 Long Journey Rd<br>
                        Upper Marlboro, MD 20772</td>
      </tr>
      <tr>
        <td width="50%">Office #</td>
        <td>301-627-4702</td>
      </tr>
      <tr>
        <td>Fax #</td>
        <td>301-627-6815</td>
      </tr>
    </table>
    
    <h3><u>Baltimore Commercial Town</u></h3>
    
    <table width="300">
      <tr>
        <td colspan="2"><b>Watts A Loan - Commercial Town</b></td>
      </tr>
      <tr>
        <td colspan="2">6915 Sonnett Blvd<br>
                        Baltimore, MD 21217</td>
      </tr>
      <tr>
        <td width="50%">Office #</td>
        <td>410-962-5005</td>
      </tr>
      <tr>
        <td>Fax #</td>
        <td>410-962-5017</td>
      </tr>
    </table>
    
    <u><h3>Columbia Town Center</h3></u>
    
    <table width="300">
      <tr>
        <td colspan="2"><b>Watts A Loan - Columbia Town Center</b></td>
      </tr>
      <tr>
        <td colspan="2">6204 East Patuxent Rd<br>
                        Columbia, MD 21042</td>
      </tr>
      <tr>
        <td width="50%">Office #</td>
        <td>410-730-2748</td>
      </tr>
      <tr>
        <td>Fax #</td>
        <td>410-730-2718</td>
      </tr>
    </table>
    
    <hr width="960">
    
    <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="https://www.sba.gov/" target="_top">Small Business Administration</a></p>
    </div>
    
    </body>
    </html>
  3. Save the offices.htm file
  4. Preview the file in a browser

Nesting a Table

Nesting a table consists of creating it inside another element. Not all elements allow table nesting. A nested table can be nested in a section (div, header, section, main, footer, li, etc). A table can also be nested in another table. In this case, the nested table must be created in a cell, that is, between the start and the end tags of td.

Practical Learning: Nesting a Table

  1. Access the offices.htm file
  2. Change the file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, office, location">
    <meta name="description" content="This webpage presents the way to contact Watts A Loan.">
    
    <title>Watts A Loan: Offices Locations</title>
    
    <head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 align="center">Offices Locations</h1>
    
            <p><b>Watts A Loan</b> has offices in Montgomery County, Prince Georges County, Baltimore, and Howard County.</p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="320">&nbsp;</td>
          <td>
    
            <h3><u>Montgomery Mall Office</u></h3>
    
            <table width="300">
            <tr>
              <td colspan="2"><b>Watts A Loan - Montgomery Mall</b></td>
            </tr>
            <tr>
              <td colspan="2">822 Rocket Star Ave<br>
                              Bethesda, MD 20817</td>
            </tr>
            <tr>
              <td width="50%">Office #</td>
              <td>240-469-4804</td>
            </tr>
            <tr>
              <td>Fax #</td>
              <td>240-469-4826</td>
            </tr>
          </table>
    
          <u><h3>Upper Marlboro Financial District</h3></u>
    
          <table width="300">
            <tr>
              <td colspan="2"><b><b>Watts A Loan - Financial</b></td>
            </tr>
            <tr>
              <td colspan="2">10715 Long Journey Rd<br>
                              Upper Marlboro, MD 20772</td>
            </tr>
            <tr>
              <td width="50%">Office #</td>
              <td>301-627-4702</td>
            </tr>
            <tr>
              <td>Fax #</td>
              <td>301-627-6815</td>
            </tr>
          </table>
    
          <h3><u>Baltimore Commercial Town</u></h3>
    
          <table width="300">
            <tr>
              <td colspan="2"><b>Watts A Loan - Commercial Town</b></td>
            </tr>
            <tr>
              <td colspan="2">6915 Sonnett Blvd<br>
                              Baltimore, MD 21217</td>
            </tr>
            <tr>
              <td width="50%">Office #</td>
              <td>410-962-5005</td>
            </tr>
            <tr>
              <td>Fax #</td>
              <td>410-962-5017</td>
            </tr>
          </table>
    
        <u><h3>Columbia Town Center</h3></u>
    
        <table width="300">
          <tr>
            <td colspan="2"><b>Watts A Loan - Columbia Town Center</b></td>
          </tr>
          <tr>
            <td colspan="2">6204 East Patuxent Rd<br>
                            Columbia, MD 21042</td>
          </tr>
          <tr>
            <td width="50%">Office #</td>
            <td>410-730-2748</td>
          </tr>
          <tr>
            <td>Fax #</td>
            <td>410-730-2718</td>
          </tr>
        </table>
    
          </td>
        </tr>
      </table>
    
      <table width="960" height="10">
        <tr>
          <td width="10">&nbsp;</td>
          <td><hr></td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="aboutus.htm">About Us</a> | <a href="products.htm">Products</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/" target="_top">Small Business Administration</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  3. Save and close the offices.htm file
  4. Preview the file in a browser
  5. Open the aboutus.htm file and change it as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, about, us, wattsaloan, mission, statement, business, strategy, communitty, outreach">
    <meta name="description" content="This webpage describes Watts A Loan business. The page also provides information about the management and the leadership personnel of the company.">
    
    <title>Watts A Loan: About Us</title>
    
    </head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 id="top" align="center">About Us</h1>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p><b>Watts A Loan</b> is a financial management business founded in 2002 
    by Catherine Watts. The company creates loans and lends money to people 
    as well as businesses. <b>Watts A Loan</b> combines innovation in financial 
    services, expertise in loan management, and specialization in particular 
    needs. The company&apos;s customers include regular people (personal loans, 
    vehicle and boat financing, etc), small businesses (business startup), and 
    organizations (commercial or <abbr title="Non-Governmental Organization">NGO</abbr>).</p>
    
            <p><b>Watts A Loan</b> started with one office. It has lately expanded and 
    is now represented in many communities. <b>Watts A Loan</b> has offices at 
    Wheaton Plaza (<i>mall</i>), at Montgomery Circle, and in Columbia. The 
    company plans to open new office in other cities while it is growing.</p>
    
            <p>Besides regular business activities, <b>Watts A Loan</b> is committed 
    to financial responsibility (<em>risk management</em>), research &amp; 
    development, and community outreach. The goals are to be financially 
    accountable and community oriented towards its customers and other 
    stakeholders.</p>
    
            <h2 id="mission" title="A sentence that defines why a company exists and what its goals are.">Mission Statement</h2>
    
            <h3>Our Mission</h3>
    
            <p>To build-up people who inspire.</p>
    
            <h3>Our Strategy</h3>
    
            <p>To be the most recommendable financial lending institution in the areas where its offices are located.</p>
    
            <h3>Our Ambition</h3>
    
            <p>To re-invent the way people interpret commercial lending.</p>
    
            <hr>
    
            <h2>Company Leadership</h2>
    
            <p><b>Watts A Loan</b> is lead by a team of business-minded and family-oriented professionals.</p>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="center"><h3><b>Watts A Loan</b> Owner and <abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts</h3></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><p><strong>Catherine Watts</strong> founded <b>Watts A Loan</b> from a 
    shining idea of creating personal loans that rebuild people&#39;s lives 
    and challenge other financial institutions. Although primarily aiming 
    to cater to individual (<i>the personal niche</i>), Cathy quickly found 
    some individual personal needs and the increasing demanding world of 
    small businesses.</p>
    
                  <p>Catherine holds a Bachelor&#039;s degree in business management and 
    a Master&#x00027;s degree in banking processes.</p></td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="right">Marketing Director and Business Strategist: Frank Heyman</h3></td>
              </tr>
              <tr>
                <td><p><strong>Frank Heyman</strong> is a former business executive. His 
    r&eacute;sum&eacute; includes many major financial firms of different 
    types of businesses, including accounting firms, consumer services, 
    and Internet startups.</p>
    
                  <p>Frank holds a Bachelor&apos;s degree in financial accounting and a 
    Master&#039;s degree in banking strategies. Frank is in charge of the 
    <b>Watts A Loan</b> business orientation 
    and financial goals.</p></td>
                <td>&nbsp;</td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3>Human Resource and Corporate Outreach Officer: Justine Bene</h3></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
    <td><p><b>Justine Bene</b> manages human resources as well as community 
    outreach. She is in charge of all hiring steps and other personel issues.  
    When it comes to community outreach, Justine ensures that the company is 
    accountable to the community.</p>
    
                  <p>Justine has a Bachelor&#039;s degree in human resources and holds 
    many professional certifications.</p></td>
              </tr>
            </table>
    
            <hr>
       
            <h2 id="finances">Finances &amp; Revenues</h2>
    
            <p><b>Watts A Loan</b> is currently managing a budget of <b>$15,000,000</b> 
    and growing. The budget is shared among the company departments:</p>
    
          <table width="350" border="8">
            <tr>
        	  <td><b>Department</b></td>
      	  <td><b title="This section includes the budget allocated to each department">Revenues</b></td>
              <td><b title="This section shows the budget fraction available for each department of the company">Margin</b></td>
            </tr>
            <tr>
              <td title="The administration includes employees payroll, community services, etc">Administration</td>
              <td>3,500,000</td>
              <td>23.33%</td>
            </tr>
            <tr>
              <td>Loans/Services</td>
              <td>9,000,000</td>
              <td>60.00%</td>
            </tr>
            <tr>
              <td>Marketing</td>
              <td>1,120,000</td>
        	  <td>6.80%</td>
            </tr>
            <tr>
              <td>R &amp; D</td>
    	  <td>1,350,000</td>
    	  <td>7.33%</td>
            </tr>
            <tr>
    	  <td>Community Outreach</td>
    	  <td>480,000</td>
              <td>2.53%</td>
            </tr>
          </table>
    
          <hr>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/sites/default/files/files/FY%202013%20AFR%20from%20CV%20Dec%2016.pdf" target="_new">SBA - Accountability</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  6. Save the file
 
 
 

Not Really Obsolete Characteristics

 

Introduction

When most HTML tags were created, there was no CSS. Those tags were given some properties through their attributes. With the arrival of CSS, it is recommended that you specify most characteristics using CSS. Still, the attributes are still available and can be used, but CSS provides alternatives to the characteristics we will review (it is strongly recommended that you use CSS). Also, most browsers support all of the attributes we will review.

Table Alignment

You may want your table to be positioned to the left, the center, or the right side of where it is created. To support the alignment of a table, the table start tag has the align attribute that has three values: left (the default), center, or right.

Practical Learning: Aligning a Table

  1. Open the aboutus.htm file and change it as follows:
    . . .
    
            <p><b>Watts A Loan</b> is currently managing a budget of <b>$15,000,000</b> 
    and growing. The budget is shared among the company departments:</p>
    
          <table width="350" border="8" align="center">
            <tr>
        	  <td align="center"><b>Department</b></td>
      	  <td align="center"><b title="This section includes the budget allocated to each department">Revenues</b></td>
              <td align="center"><b title="This section shows the budget fraction available for each department of the company">Margin</b></td>
            </tr>
            <tr>
              <td title="The administration includes employees payroll, community services, etc">Administration</td>
              <td align="right">3,500,000</td>
              <td align="center">23.33%</td>
            </tr>
            <tr>
              <td>Loans/Services</td>
              <td align="right">9,000,000</td>
              <td align="center">60.00%</td>
            </tr>
            <tr>
              <td>Marketing</td>
              <td align="right">1,120,000</td>
        	  <td align="center">6.80%</td>
            </tr>
            <tr>
              <td>R &amp; D</td>
    	  <td align="right">1,350,000</td>
    	  <td align="center">7.33%</td>
            </tr>
            <tr>
    	  <td>Community Outreach</td>
    	  <td align="right">480,000</td>
              <td align="center">2.53%</td>
            </tr>
          </table>
    
          <hr>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
    . . .
  2. Save the file and preview it in the browser

Text Alignment in a Cell

Text in a cell can be aligned to the left, the center, or the right side. To support this, the td start tag support the align attribute that can one the left (the default),the center, or the right value.

Practical Learning: Aligning a Table

  1. Change the aboutus.htm file as follows:
    <html>
    <head>
    
    <meta name="author" content="Catherine Watts">
    <meta name="keywords" content="watts, personal, business, loan, about, us, wattsaloan, mission, statement, business, strategy, communitty, outreach">
    <meta name="description" content="This webpage describes Watts A Loan business. The page also provides information about the management and the leadership personnel of the company.">
    
    <title>Watts A Loan: About Us</title>
    
    </head>
    <body>
    
    <div align="center">
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>&nbsp;</td>
          <td width="30">&nbsp;</td>
        </tr>
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <h1 id="top" align="center">About Us</h1>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p><b>Watts A Loan</b> is a financial management business founded in 2002 
    by Catherine Watts. The company creates loans and lends money to people 
    as well as businesses. <b>Watts A Loan</b> combines innovation in financial 
    services, expertise in loan management, and specialization in particular 
    needs. The company&apos;s customers include regular people (personal loans, 
    vehicle and boat financing, etc), small businesses (business startup), and 
    organizations (commercial or <abbr title="Non-Governmental Organization">NGO</abbr>).</p>
    
            <p><b>Watts A Loan</b> started with one office. It has lately expanded and 
    is now represented in many communities. <b>Watts A Loan</b> has offices at 
    Wheaton Plaza (<i>mall</i>), at Montgomery Circle, and in Columbia. The 
    company plans to open new office in other cities while it is growing.</p>
    
            <p>Besides regular business activities, <b>Watts A Loan</b> is committed 
    to financial responsibility (<em>risk management</em>), research &amp; 
    development, and community outreach. The goals are to be financially 
    accountable and community oriented towards its customers and other 
    stakeholders.</p>
    
            <h2 id="mission" title="A sentence that defines why a company exists and what its goals are.">Mission Statement</h2>
    
            <h3>Our Mission</h3>
    
            <p>To build-up people who inspire.</p>
    
            <h3>Our Strategy</h3>
    
            <p>To be the most recommendable financial lending institution in the areas where its offices are located.</p>
    
            <h3>Our Ambition</h3>
    
            <p>To re-invent the way people interpret commercial lending.</p>
    
            <hr>
    
            <h2>Company Leadership</h2>
    
            <p><b>Watts A Loan</b> is lead by a team of business-minded and family-oriented professionals.</p>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="center"><h3><b>Watts A Loan</b> Owner and <abbr title="Chief Executive Officer">CEO</abbr>: Catherine Watts</h3></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
                <td><p><strong>Catherine Watts</strong> founded <b>Watts A Loan</b> from a 
    shining idea of creating personal loans that rebuild people&#39;s lives 
    and challenge other financial institutions. Although primarily aiming 
    to cater to individual (<i>the personal niche</i>), Cathy quickly found 
    some individual personal needs and the increasing demanding world of 
    small businesses.</p>
    
                  <p>Catherine holds a Bachelor&#039;s degree in business management and 
    a Master&#x00027;s degree in banking processes.</p></td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3 align="right">Marketing Director and Business Strategist: Frank Heyman</h3></td>
              </tr>
              <tr>
                <td><p><strong>Frank Heyman</strong> is a former business executive. His 
    r&eacute;sum&eacute; includes many major financial firms of different 
    types of businesses, including accounting firms, consumer services, 
    and Internet startups.</p>
    
                  <p>Frank holds a Bachelor&apos;s degree in financial accounting and a 
    Master&#039;s degree in banking strategies. Frank is in charge of the 
    <b>Watts A Loan</b> business orientation 
    and financial goals.</p></td>
                <td>&nbsp;</td>
              </tr>
            </table>
    
            <hr>
    
            <table>
              <tr>
                <td colspan="2"><h3>Human Resource and Corporate Outreach Officer: Justine Bene</h3></td>
              </tr>
              <tr>
                <td>&nbsp;</td>
    <td><p><b>Justine Bene</b> manages human resources as well as community 
    outreach. She is in charge of all hiring steps and other personel issues.  
    When it comes to community outreach, Justine ensures that the company is 
    accountable to the community.</p>
    
                  <p>Justine has a Bachelor&#039;s degree in human resources and holds 
    many professional certifications.</p></td>
              </tr>
            </table>
    
            <hr>
       
            <h2 id="finances">Finances &amp; Revenues</h2>
    
            <p><b>Watts A Loan</b> is currently managing a budget of <b>$15,000,000</b> 
    and growing. The budget is shared among the company departments:</p>
    
          <table width="350" border="8" align="center">
            <tr>
        	  <td align="center"><b>Department</b></td>
      	  <td align="center"><b title="This section includes the budget allocated to each department">Revenues</b></td>
              <td align="center"><b title="This section shows the budget fraction available for each department of the company">Margin</b></td>
            </tr>
            <tr>
              <td title="The administration includes employees payroll, community services, etc">Administration</td>
              <td align="right">3,500,000</td>
              <td align="center">23.33%</td>
            </tr>
            <tr>
              <td>Loans/Services</td>
              <td align="right">9,000,000</td>
              <td align="center">60.00%</td>
            </tr>
            <tr>
              <td>Marketing</td>
              <td align="right">1,120,000</td>
        	  <td align="center">6.80%</td>
            </tr>
            <tr>
              <td>R &amp; D</td>
    	  <td align="right">1,350,000</td>
    	  <td align="center">7.33%</td>
            </tr>
            <tr>
    	  <td>Community Outreach</td>
    	  <td align="right">480,000</td>
              <td align="center">2.53%</td>
            </tr>
          </table>
    
          <hr>
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    
      <table width="960" height="50">
        <tr>
          <td width="10">&nbsp;</td>
          <td>
    
            <p align="center"><a href="index.htm">Home</a> | <a href="offices.htm">Offices Locations</a> | <a href="services/index.htm">Services</a> | <a href="process.htm">Loan Process</a> | <a href="https://www.sba.gov/sites/default/files/files/FY%202013%20AFR%20from%20CV%20Dec%2016.pdf" target="_new">SBA - Accountability</a></p>
    
          </td>
          <td width="30">&nbsp;</td>
        </tr>
      </table>
    </div>
    
    </body>
    </html>
  2. Save and close the file.
    If you had set up a website and if you are working from your computer, upload the files now
  3. Preview the index.htm file from your website or from your computer, and click the links
   
   
 

Previous Copyright © 2015, FunctionX Next