HTML and CSS Reference
In-Depth Information
Lesson 11.
Organizing Data with Tables
HTML tables were created to provide a straightforward way to mark up structured tabular
data and to display that data in a form that is easy for users to read and digest.
When HTML was being developed, however, CSS was not widely supported in browsers, so
tables were the primary means by which websites were built. They were used for positioning
content as well as for building the overall layout of a page. This worked at the time, but it
was not what table markup was intended for, and it led to many other associated problems.
Fortunately, we have come a long way since then. Today tables are used specifically for or-
ganizing data (like they should be), and CSS is free to get on with the jobs of positioning
and layout.
Building data tables still has its challenges. How a table should be built in HTML depends
largely on the data and how it is to be displayed. Then, once they're marked up in HTML,
tables need to be styled with CSS to make the information more legible and understandable
to users.
Creating a Table
Tables are made up of data that is contained within columns and rows, and HTML supplies
several different elements for defining and structuring these items. At a minimum a table
must consist of
<table>
,
<tr>
(table row), and
<td>
(table data) elements. For greater
structure and additional semantic value, tables may include the
<th>
(table header) element
and a few other elements as well. When all of these elements are working together, they pro-
duce a solid table.
Table
We use the
<table>
element to initialize a table on a page. Using the
<table>
element
signifies that the information within this element will be tabular data displayed in the neces-
sary columns and rows.
1.
<table>
2.
...
3.
</table>
Search WWH ::
Custom Search