Organizational Elements - HTML

Two HTML elements help organize information in a document: tables and forms. Tables allow you to present data in column and row format, much like a spreadsheet. Forms allow you to present (and retrieve) data using elements common to GUI interfaces—elements such as text boxes, check boxes, and lists.

Tables
HTML tables are very basic, but can be very powerful when used correctly. At their base level, tables can organize data into rows and columns. At their highest level, tables can provide complicated page design—much like a page in a magazine or newspaper, providing columns for text and sections for graphics, menus, and so on.

Tables have three basic elements and, hence, three basic tags:

  • The table definition itself is defined and delimited by <table> tags.
  • Ros of data are defined and delimited by <tr> (table row) tags.
  • Table cells (individual pieces of data) are defined and delimited by <td> (table data) tags. Table cells, when stacked in even rows, create table columns.

For example, consider the following code, which results in the output shown in Figure:

This example is very straightforward because the table is very simple. However, due to the number of options you can use in formatting table elements and the fact that you can nest tables within tables, the tables in your HTML documents can get very complicated (and very powerful). To illustrate this point, compare Figures shows a page as it normally appears in the browser. However, if you turn on the table borders you can see how several tables (and nested tables) are used to provide the document layout, as shown in Figure.

Eleven rows and two columns of data in a table.

Eleven rows and two columns of data in a table
This document uses invisible tables to achieve its layout.

This document uses invisible tables to achieve its layout
Making the table borders visible shows just how many tables are involved in laying out the page and how they help constrain the layout.Forms

Making the table borders visible shows just how many tables are involved in laying out the page and how they help constrain the layout. Forms

HTML forms provide a method to use standard GUI elements to display and collect data. HTML forms provide the standard litany of GUI elements, including text boxes, check boxes, pull down (also referred to as drop-down) lists, and more. In addition to providing basic GUI elements, HTML forms also provide a rudimentary method of collecting data and passing that data to a data handler for validation, storage, comparison, and so on.

A typical HTML form resembles the following code, the output.

Form elements provide standard GUI controls for displaying and collecting data.

Form elements provide standard GUI controls for displaying and collecting data.
The preceding example form is very simple, it shows only some basic elements, and has no handler to process the data that is collected by the form. Real-world forms can be quite complex and usually require validation scripts to ensure the data collected is valid. However, this simple form illustrates the amount of control you can assert over data and format using HTML.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics