If the data tables are difficult for users to read, imagine how complex and confusing they are with assistive technology (handheld devices). Fortunately, the HTML specification provides a number of properties and attributes to improve the accessibility of data tables to these devices.
1.summary and Caption
The first element is the caption of the table, which is basically used as the caption of the table. Although this is not a necessary element, it is always good to use caption. Another element is the Summary.summary attribute that can be applied to a table label. Used to describe the contents of a table. Similar to the Alt Text property of image.
2.thead, tbody, TFOOT
THEAD, Tbody, TFOOT allows web designers to divide tables into parts of the ROM. For example, you can place all the column headings in the THEAD element so that you can apply styles individually to this particular area. If you choose to use a thead or TFOOT element, You must use at least one TBODY element. Only one thead and tfoot element can be used in a table, but multiple tbody elements may be used to divide complex tables into more manageable parts.
3.col and Colgroup
Row and column headings should use the TH tag instead of TD, but if some content is both title and data, it still uses TD. Table headings can be set to the scope property of row or col, defining whether they are row headings or column headings.
Although the TR element enables a developer to apply a style across a row, it is difficult to apply a style to the entire column. To solve this problem, the Colgroup and Col elements are introduced into the consortium. Colgroup can group one or more columns that are defined with the COL element. Unfortunately, There are not many browsers that support styles for Col and colgroup elements.
The following is the HTML code:
=============================
<table cellspacing= "0" id= "playlisttable" summary= "wood music charts, once a week, to give you the best to listen to music to enjoy." >
<caption>
The music chart of the XI Wood
</caption>
<colgroup>
<col id= "Playlistcol"/>
<col id= "Trackcol"/>
<col id= "Artistcol"/>
<col id= "Albumcol"/>
</colgroup>
<thead>
<tr>
<th id= "Playlistposhead" scope= "col" > Xi mu Music rankings </th>
<th scope= "col" > Song </th>
<th scope= "col" > singer </th>
<th scope= "col" > album </th>
</tr>
</thead>
<tbody>
<tr class= "Odd" >
<td>1</td>
<td> My future is not a dream </td>
<td> Backstreet Boys </td>
<td> Unknown </td>
</tr>
<tr>
<td>2</td>
<td> Yesterday recurrence </td>
<td> Carpenter </td>
<td> Unknown </td>
</tr>
<tr class= "Odd" >
<td>3</td>
<td> My future is not a dream </td>
<td> Backstreet Boys </td>
<td> Unknown </td>
</tr>
<tr>
<td>4</td>
<td> Yesterday recurrence </td>
<td> Carpenter </td>
<td> Unknown </td>
</tr>
<tr class= "Odd" >
<td>5</td>
<td> My future is not a dream </td>
<td> Backstreet Boys </td>
<td> Unknown </td>
</tr>
<tr>
<td>6</td>
<td> Yesterday recurrence </td>
<td> Carpenter </td>
<td> Unknown </td>
</tr>
<tr class= "Odd" >
<td>7</td>
<td> My future is not a dream </td>
<td> Backstreet Boys </td>
<td> Unknown </td>
</tr>
<tr>
<td>8</td>
<td> Yesterday recurrence </td>
<td> Carpenter </td>
<td> Unknown </td>
</tr>
<tr class= "Odd" >
<td>9</td>
<td> My future is not a dream </td>
<td> Backstreet Boys </td>
<td> Unknown </td>
</tr>
<tr>
<td>10</td>
<td> Yesterday recurrence </td>
<td> Carpenter </td>
<td> Unknown </td>
</tr>
</tbody>
</table>
=========================
Here 's how to add CSS:
The CSS specification has two table border models: separate and stacked. In a separate model, there is a border around each cell, while the cell shares a border in the overlay model. Most browsers default to a separate model, The first thing to do is to set the table's Border-collapse property to collapse. To prevent the table from being too wide, you need to limit its width; To help define the table area, it's a good idea to add a border. By applying a small amount of straight and horizontal padding, It's also a good idea to create some whitespace around table cells.
---------------------------------
Table {
Border-collapse:collapse;
Width:50em;
border:1px solid #666;
}
Th, TD {
Padding:0.1em 1em;
}
----------------------------------
The Border-spacing property of a CSS can control the distance between cells. Unfortunately, the IE6 and lower versions of Windows do not understand this attribute (don't doubt it, because most people don't know how to upgrade) and therefore rarely use it. To remove the default padding between cells, Had to use the old-fashioned but reliable cellspacing attribute. Strictly speaking, this attribute is inherently expressive. However, it is still valid HTML and is the only way to control cell spacing currently in IE6.
--------------------------------------
<table cellspacing= "0" id= "playlisttable" summary= "wood music charts, once a week, to give you the best to listen to music to enjoy." >
---------------------------------------
Complete CSS Code:
==============================
Table {
Border-collapse:collapse;
Width:50em;
border:1px solid #666;
}
Caption {
Font-size:1.2em;
Font-weight:bold;
Margin:1em 0;
}
Col {
border-right:1px solid #ccc;
}
Col#albumcol {
Border:none;
}
thead {
Background: #ccc URL (images/bar.gif) repeat-x left center;
border-top:1px solid #a5a5a5;
border-bottom:1px solid #a5a5a5;
}
th {
Font-weight:normal;
Text-align:left;
}
#playlistPosHead {
Text-indent: -1000em;
}
Th, TD {
Padding:0.1em 0.5em;
}
. Odd {
Background-color: #edf5ff;
}
Tr:hover {
Background-color: #3d80df;
Color: #fff;
}
Thead Tr:hover {
Background-color:transparent;
Color:inherit;
}
==============================
Just learn CSS when I think <table> tag is not used, in fact, the idea was wrong,<table> without layout, now back to its original function,--display data.
