HTML Markup Language - Table Tags

Click here to return to the Wulin.com HTML tutorial column.

Above: Markup Language - Title

Original source

Do you know? I don’t know when it started, using tables turned into a sinful act? Indeed, the biggest myth of writing web pages based on web standards is to stop using tables anymore, never! It sounds like a plague, it must be avoided, and must be sealed and thrown into a dusty cabinet, and it is regarded as an antique passed down from the early days of the Internet development era.

Where does such disgust come from? Perhaps it was very simple at the beginning, at least with a good reason. Many people would be confident in promoting the benefits of abandoning the traditional layout of table nesting and empty gif pictures, and instead using a flexible structured CSS layout. We may start to remove all the tables in a detached manner, and even stubbornly insist on expelling all the tables—no matter the occasion.

Later in the book, we will see the method of css layout and all the benefits of doing so. But now let’s take a look at how to use tables in the right situation—that is, when marking data lists. We will look at a few simple ways to make our data lists easier to use and more beautiful.

When tagging list data, there is absolutely no reason not to use table tags. But wait, what is list data? Here are some examples: Calendar spreadsheet chart time schedule

For these examples and many other cases, very complex and strict CSS effects must be used to make the data look like a table. Perhaps you can imagine that using clever CSS floats to locate all projects will result in incompatible and contradictory results, not to mention that after removing CSS, accurately reading each data will probably become an impossible task. In fact, we don't have to be afraid of tables - we should use them with their original design goals.

One of the reasons why tables are criticized is that there will be usability defects if you are not used carefully. For example: screen reading programs are difficult to read content correctly, while small screen devices are often disturbed by tables used to layout, but we have some simple ways to increase the usability of list data tables. At the same time, we establish a flexible structure to facilitate the future setting of styles with CSS.

Let's look at the simple example in Figure 3-1, which is the league record of the American Baseball League:

Figure 3-1: Typical data representation example

Perhaps this is a very depressing statistical data for Red Sox fans, but the figure 3-1 is a perfect example of the list data. It has three table headers (year, opponent, season record(wl)), followed by four-year data. On the table is the title of the table, which explains the content of the table.

The way to mark this data table is very intuitive, and we may do this with code like this:

<p align=center>Boston Red Sox World Series Championships</p>

<table>

<tr>

<td align=center><b>Year</b></td>

<td align=center><b>Opponent</b></td>

<td align=center><b>Season Record (WL)</b></td>

</tr>

<tr>

<td>1918</td>

<td>Chicago Cubs</td>

<td>75-51</td>

</tr>

<tr>

<td>1916</td>

<td>Brooklyn Robins</td>

<td>91-63</td>

</tr>

<tr>

<td>1915</td>

<td>Philadelphia Phillies</td>

<td>101-50</td>

</tr>

<tr>

<td>1912</td>

<td>New York Giants</td>

<td>105-47</td>

</tr>

</table>

The results shown in this way should be very similar to Figure 3-1, but we can add some improvements to this basis.

First, we can use a more semantic <caption> tag to store Boston Red Sox World Series Championships. The <caption> tag needs to be followed immediately after the <table> starting tag, which is usually used to store the title of the table or the description of the table information.

It seems that it makes it easier for users to see the topic of the table, and it can also help people who know the content of the web in other ways.

Let's remove the beginning paragraph and add the correct <caption>:

<table>

<caption>Boston Red Sox World Series Championships</caption>

<tr>

<td align=center><b>Year</b></td>

<td align=center><b>Opponent</b></td>

<td align=center><b>Season Record (WL)</b></td>

</tr>

<tr>

<td>1918</td>

<td>Chicago Cubs</td>

<td>75-51</td>

</tr>

<tr>

<td>1916</td>

<td>Brooklyn Robins</td>

<td>91-63</td>

</tr>

<tr>

<td>1915</td>

<td>Philadelphia Phillies</td>

<td>101-50</td>

</tr>

<tr>

<td>1912</td>

<td>New York Giants</td>

<td>105-47</td>

</tr>

</table>

Importantly, the title must quickly convey the subject of the following information. According to the default settings, most visual browsers center the text in the <caption> tag on the top of the table. Of course, we can use css to change the style of the default settings later - this issue will be discussed in the extension of the tips of this chapter. In fact, the title is now located in a unique tag, which makes our subsequent modification work easier and simple.

Previous page1 2 3 4 5 6 7 8 Next page Read the full text