Creating tables can be error prone and difficult using the older HTML tags. In addition, they prove inflexible at times. It’s possible to create tables using another technique. All you need is a series of cascading Many developers have used tables for all sorts of tasks in the past. Of course, there is the use of tables to display data. However, tabular arrangements are also useful for creating forms to ensure the various elements align in a predictable manner. This second use of tables is problematic because it confuses some software such as screen readers. The problem becomes one of defining a well-organized page without creating problems for the people viewing it. Using Defining the HTML for a Notice that each The CSS for this table uses a few special properties and a little clever formatting. Here is the CSS used to make this example functional. Notice the use of the display property. This is the crucial property for your table because it tells the browser how to display a particular element. Otherwise, there isn’t anything strange of out of the normal about these styles. You define text attributes that help viewers differentiate between various table elements. Cells are separated from each other using a simple border. The following figure shows you how the table will appear when you view it in a browser.![[Credit: ©iStockphoto.com/Anton Cherstvenkov]](https://cdn.prod.website-files.com/6634a8f8dd9b2a63c9e6be83/6698cd97006885f563fd6db3_479693.image0.jpeg)
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell">
<p>Heading 1</p>
</div>
<div class="Cell">
<p>Heading 2</p>
</div>
<div class="Cell">
<p>Heading 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 1 Column 1</p>
</div>
<div class="Cell">
<p>Row 1 Column 2</p>
</div>
<div class="Cell">
<p>Row 1 Column 3</p>
</div>
</div>
<div class="Row">
<div class="Cell">
<p>Row 2 Column 1</p>
</div>
<div class="Cell">
<p>Row 2 Column 2</p>
</div>
<div class="Cell">
<p>Row 2 Column 3</p>
</div>
</div>
</div>
<style type="text/css">
.Table
{
display: table;
}
.Title
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.Heading
{
display: table-row;
font-weight: bold;
text-align: center;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style>
Using the Div Tag to Create Tables
|
| Updated:
2016-03-26 07:41:36
| From The Book:
No items found.
tags to perform the task.
Credit: ©iStockphoto.com/Anton Cherstvenkov
tags to create a table makes it possible for viewers to see a table or a logical arrangement of controls with equal ease. This technique also has the benefit of not confusing screen readers and other software.
table looks somewhat like creating a table using the older tags, except you don’t have to worry about odd arrangements of arcane tags to do it. Here is the HTML for a table that contains a title, headings, and two rows of content.
level is defined using an easily recognized name, such as Table, Title, Heading, Row, and Cell. Using this naming method makes it a lot easier to figure out what each level of the table is supposed to do. You can find many different alternatives to this approach online, but this basic approach will serve you well.
