HTML markup language - table tag
|
Click here to return to the 123WORDPRESS.COM HTML Tutorial section. Previous: Markup Language - Title <br />Original Source Standardized design solutions - markup languages and style manuals Web Standards Solutions The Markup and Style Handbook Part 1: Get Down With Markup Chapter2 Evil table? Did you know that using tables has become a sin? Indeed, the biggest myth about writing web pages in web standards is "Never use tables again, ever!" It sounds like tables are to be avoided like the plague, sealed away in a dusty cabinet, and preserved as a relic from the early days of the web. Where does such aversion come from? Perhaps it was innocent at first, or at least had a good reason. Many people would confidently promote the benefits of abandoning the traditional layout method of nested tables and blank-filling GIF images and using flexible structured CSS layout methods. We might start to remove all tables, or even stubbornly insist on expelling all tables - regardless of the occasion. Later in the book we'll look at CSS layout methods and all the benefits they bring. But for now, let's take a look at how to use tables when it's appropriate - when marking up lists of data. We'll look at a few simple ways to make our lists of data easier to use and more beautiful. It's all about tables <br />There's absolutely no reason not to use table tags when marking up tabular data. But wait, what is tabular data? Here are some examples: Calendars Spreadsheets Charts Timelines For these and many other cases, it takes very complex and strict CSS effects to make the data look like a table. As you can probably imagine, using clever CSS floats and positioning all the items would result in incompatible and contradictory results, not to mention that without the CSS, it would probably be impossible to accurately read each piece of data. In fact, we don't have to be afraid of tables—we should use them for the purpose for which they were designed. Tables for Everyone <br />One of the reasons tables get a bad rap is that they can have usability problems if not used with care. For example, screen readers have trouble reading the content correctly, and small screen devices often clutter up the layout with tables, but there are some simple ways to increase the usability of tables that list data while creating flexible structures that can be easily styled with CSS in the future. Let's look at the simple example in Figure 3-1, which is the league record for the American League Baseball:  Figure 3-1: Typical data table example This may be a very depressing statistical data for Red Sox fans, but Figure 3-1 is a perfect example of tabular data. It has three table headers (year, opponent, season record (wl)), followed by four years of data. Above the table is the table title, which describes the contents of the table. The way to mark up this data table is very straightforward, we might 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 result should be very similar to Figure 3-1, but we can make some improvements on this basis. First, we can use the more semantic <caption> tag to store "Boston Red Sox World Series Championships". The <caption> tag needs to be placed immediately after the <table> start tag, and is usually used to store the title of the table or the description of the table data. It seems that it makes it easier for users to see the subject of the table, and it can also help people who know the content of the page in other ways. Let's remove the opening 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> It is important that the title quickly conveys the subject of the material that follows. By default, most visual browsers center the text in the <caption> tag at the top of the table. Of course, we can change the default style later using CSS - we will discuss this in the extended tips of this chapter. The fact that the title is now in a unique tag makes it easy for us to modify it later. Previous Page 1 2 3 4 5 6 7 8 Next Page Read Full Article |
<<: Docker online and offline installation and common command operations
>>: Will Update in a Mysql transaction lock the table?
Recommend
Modularity in Node.js, npm package manager explained
Table of contents The basic concept of modularity...
Detailed tutorial on how to use docker to build a laravel development environment in win10 home version
operating system: Win10 Home Edition Install Dock...
Detailed explanation of props and context parameters of SetUp function in Vue3
1. The first parameter props of the setUp functio...
How to modify Flash SWF files in web pages
I think this is a problem that many people have en...
Solution to the Docker container not having permission to write to the host directory
When applying docker containers, we often mount t...
MySQL Series 11 Logging
Tutorial Series MySQL series: Basic concepts of M...
Nginx sample code for implementing dynamic and static separation
In combination with the scenario in this article,...
Linux uses suid vim.basic file to achieve privilege escalation
Reproduce on Kali First set suid permissions for ...
Detailed explanation of Vue's ref attribute
Summarize This article ends here. I hope it can b...
MySQL permissions and database design case study
Permissions and database design User Management U...
Mysql database master-slave separation example code
introduce Setting up read-write separation for th...
Solution to the same IP after cloning Ubuntu 18 virtual machine
Preface I recently used a virtual machine to inst...
Summary of B-tree index knowledge points in MySQL optimization
Why do we need to optimize SQL? Obviously, when w...
In-depth understanding of the use of CSS clear:both
clear:both is used to清除浮動This is the impression I...
MySQL5.7 parallel replication principle and implementation
Anyone who has a little knowledge of data operati...