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
Let's deeply understand the event object in js
We know that the commonly used events in JS are: ...
How to use stored procedures in MySQL to quickly generate 1 million records
Preface When testing, in order to test the projec...
Pure CSS3 code to implement a running clock
Operation effectCode Implementation html <div ...
Detailed explanation of the correct way to configure SSL (https certificate) in Apache on Ubuntu
First, take a look at Alibaba Cloud's officia...
Specific use of Mysql prepare preprocessing
Table of contents 1. Preprocessing 2. Pretreatmen...
Summary of web design experience and skills
■ Website theme planning Be careful not to make yo...
How to create a project with WeChat Mini Program using typescript
Create a project Create a project in WeChat Devel...
Detailed explanation of this reference in React
Table of contents cause: go through: 1. Construct...
JavaScript to achieve fireworks effects (object-oriented)
This article shares the specific code for JavaScr...
How to set the position of the block element in the middle of the window
How to set the position of the block element in t...
Vue+flask realizes video synthesis function (drag and drop upload)
Table of contents We have written about drag and ...
How to install the green version of MySQL Community Server 5.7.16 and implement remote login
1. Download MySQL Community Server 5.7.16 and ins...
Summary of Common Commands for Getting Started with MySQL Database Basics
This article uses examples to describe the common...
Input file custom button beautification (demo)
I have written such an article before, but I used...