[Html/html5]8 Use Form

8.1 Creating a basic table structure

8.1.1 Table Structure

The HTML table consists of 4 basic elements:

• Table: In HTML, the table element is a container that contains the other elements used to create the table;
• TR: Represents a row in a table, starting with <tr> and ending </tr> the cell used to enclose the row;
• TD: Represents the data in the table, used in the table to contain the actual contents of the cell, start tag <td> and end tag </td> to represent a cell in the row;
• Th: Represents the table header, which is an optional tag used in place of the TD tag, which defines a cell that contains the header information for the table.

8.1.2 cell contents

In a table cell, you can almost include any type of content that a Web page can render. For the specified cell, the contents of the cell should be placed between the opening tag <td> and the closing tag </td>. All tags used for formatting content should also be included between the <td> and </td> tags.

To include empty cells with no content in the table, enter a non-wrapped space (&nbsp;) character between the <td> and </td> tags in the cell as its contents, and the cell appears blank .

By default, the size of each cell changes depending on how much the cell contents are. After a certain number of characters are displayed, the browser may wrap the content (wrap), stop displaying the content on the current line, and continue to display the rest of the content from the next line. A line break occurs only if the table touches another element of the page, or if it reaches the edge of the browser. In different browsers, the default location for wrapping content may vary.

(1) text in a cell

In each cell, you can use the HTML elements you learned earlier to customize the text in a cell. For example, you can use the strong element to add emphasis so that the text in a cell is displayed in bold.

If you want the text in each cell to have the same characteristics, the best solution is to use a style sheet and make the TD tag the selector.

(2) The image in the cell

For HTML tables, you can also add images to their cells. Simply add a reference to the image using the IMG element in the cell where you want to display the image.

8.2 Formatting a table in a Web page

8.2.1 borders and margins

Depending on the design of the table, it essentially has an inner border and an outer frame. By default, most browsers set the border span to 0, which makes the border invisible. However, for statistics tables, borders are useful. For example, people need to see different columns to better understand the data in the table. The key to using a border in a table is to understand the three properties associated with it.

(1) The Border property of the table tag

Even if you eventually want the borders of the table to be invisible, a good way to see the table composition when creating a table is to temporarily open all the table borders. Simply add the border attribute to the <table> tag and set it to 1.

1 <  Border= "1">

(2) Border property in style sheet

You can also use the Border property in the style sheet to define the style of the table border, including the Border-width, Border-style, Border-color properties. The Border-collapse and Border-spacing properties are useful when you need to eliminate or customize the spacing between cells. The Border-collapse property can be used in two ways:

• Border-collapse:collapse Close all margins between cell borders
• Border-collapse:seperate keep the spacing between cell borders

When you set the Border-collapse property to seperate, you can continue to use the Border-spacing property to specify exactly how much space should be included between the cells:

1{border-collapse:seperate; border-spacing:10px 5px;}

(3) Spacing properties

You can also use the Padding property and the margin property in a style sheet to define the spacing around a cell. Note that the entire table can use either the Padding property or the margin property to define the style, but only the Padding property can be used for a single cell and the margin property cannot be used.

8.2.2 Width and height

When you add a table to a page, use the style sheet properties width and height to define the size of the table. If you do not declare the size of the table, the browser determines the size of the table based on the number of contents in each cell and the amount of space available in the browser window, which may cause the table's display to be inconsistent with expectations.

In this example, the width and height of the table are defined as absolute dimensions, so that when the browser window becomes larger or smaller, the size of the table does not change.

1{width: 200px; height: 200px; border: 3px solid Black ;}

On the other hand, if you don't care about the exact size of the table, but you want the table to occupy only 50% of the browser window and not exceed that scale, you can use percentages to define the width and Height properties of the table:

1{width: 50%; height: 50%; border: 3px solid black;}

8.2.3 Basic Alignment

You can use the Float property to align a picture or table to the left or right of the surrounding text, or to use the table element as a selector if there is only one table in the page.

1{float: right;}

8.2.4 Color of table

To change the background color of the entire table, use the table tag as the selector and add the Background-color property to the style sheet.

1{background-color: yellow;}

Background image of the 8.2.5 table

You can add the Background-image property to a style sheet to use an image as the background for the entire table. When you apply the Background-image attribute to a table, it works the same way that you apply it to other Web page objects. That is, the background image is automatically populated from left to right and from top to bottom. If you want, you can also change the options for repeating the fill (such as the Background-repeat and Background-attachment properties) with other background properties you have previously learned.

1{background-image: url (' e://image/test.png ');}

8.2.6 the title of the table

The caption element is used to specify a caption for a table, which is not a property of the table element , but rather a separate element . The caption element is used before the start tag <table> of the table, before the first table row <tr> tag. The caption element's start tag <caption> and end tag </caption>, used to enclose the text as a table caption. By default, the table headings align to the top of the table and are centered. To change the alignment of a table header, you can use the following two CSS properties:

• Text-align: Used to define whether the caption text is left-aligned, right-aligned, or centered-aligned, regardless of which side of the table the table title is on;
• Caption-side: Lets you specify which side of the table (top, right, bottom, or left) to place the table title on.

1{text-align: right; caption-side:bottom;}

8.3 Formatting the contents of a table cell

In addition to the styles that define the entire table, you can define styles for each cell in the table. You can change the alignment, width, height, and background color of a cell, and you can restrict wrapping in a cell, so that the contents of a cell span multiple rows or columns.

8.3.1 Alignment

To change the vertical or horizontal alignment, you can add the Text-align property to the TR, TH, or TD tags to set the horizontal alignment, and add the Vertical-align property to set the vertical alignment.

• TR: Adds the Text-align attribute or Vertical-align property to the <tr> tag, and the alignment specified will be valid for all cells in the row;
• TD, Th: Adds the Text-align property or the Vertical-align property to the <td> or <th> tag, and the alignment specified is valid only for that cell.

If you want to define a different alignment for the cells in each column, you can create three CSS classes first:

1{text-align: left; vertical-align: top;} 2  {text-align: right; vertical:bottom;} 3 . Center {text-align: Center; Vertical:middle;}

8.3.2 Width and height

In the table tag, use the width and Height properties to identify the dimensions of the entire table. You can also add the width and Height properties in a TD or th tag to specify the dimensions of each cell.

If you want the three columns to have the same width regardless of the size of the browser window, you can define the width property of the th tag as one-third for the entire table width in the style sheet:

1{width: 33%;}

8.3.3 padding of cells

Although the table cell does not have a margin property, the cell has the Padding property. If you want to keep a certain buffer area (padding) around the contents of the cell, simply add the Padding property to the style sheet.

1{padding: 10px;}

8.3.4 Color of cell

You can change the color of the entire table by adding the Background-color property to the table's style sheet. Using the Background-color property in TR, TD, or TH, you can specify the background color of a row or a cell.

1{background-color: green;}

8.3.5 No Line break

Sometimes you want the contents of a cell to remain a single line, that is, there is no line break in the middle. In this case, you can use the White-space property and set the value of the property to "NoWrap"to tell the browser to keep the contents of the cell as one line as possible (this is not always possible, If the browser window is very small, it causes the content to not appear on a single line. The style that makes the cell not wrap is defined as follows:

1{white-space: nowrap;}

8.3.6 make cells span multiple columns

So far, the table you have learned is a grid (grit-like) table, where each row and column has the same number of cells. Although this is only the default, you can add a property to the start tag of the TD or th to merge the cell with its adjacent cells.

　　By default, each cell can span only one column. Use the Colspan property to change the default setting so that a cell can span two or more columns.

1 <  colspan= "2">hello,world</td>

You can combine cells so that they span two or more columns, and you can merge cells so that they span two or more rows. the attribute used to implement a cell across multiple lines is rowspan.

1 <  rowspan= "2">hello,world</td> 

8.4 Other Techniques for formatting tables

8.4.1 Row Grouping

The following three tags are particularly useful when grouping rows in a table:

• Thead: Table Header
• Tfoot: Table Footer
• Tbody: Table Body

Using these three tags when creating a table, the browser can differentiate between table headers, table footer information, and table body information. The advantage of using these three tags is that when a user views a page that contains a longer table, the header information is repeated at the top of each page (or each screen view), as is the case when the table is printed. This helps to avoid situations where a table header cannot be seen in a longer table.

While these three tokens are not required, each tag should contain at least one table row defined with the TR tag when using the three tags. In addition, if you include a THEAD or tfoot (or both) in the definition of a table, you must include at least one tbody tag.

1 <TableBorder= "1">2     <thead>3         <TR>4             <th>Age</th>5             <th>Height</th>6             <th>Weight</th>7         </TR>8     </thead>9     <tfoot>Ten         <TR> One             <TDcolspan= "3">Data taken from the Corinna and the Society</TD> A         </TR> -     </tfoot> -     <tbody> the         <TR> -             <TD>Birth</TD> -             <TD>19.5 inches</TD> -             <TD>7 lbs. 9 oz.</TD> +         </TR> -     </tbody> + </Table>

Another benefit of using these three tags is to make it easier to define table styles. If you want to define the data behavior in a table as a style, define the table header as a different style, and then define the table footer as a different style. As long as you are grouping using THEAD, tbody, and tfoot tags when creating a table structure, you can define different styles for the header, table body, and table footer by simply referencing the three tags in a style.

1{font-family: Verdanna;} 2  {background-color: black; color: White;} 3  {background-color: #ccc;} 4  {font-size: 10pt; font-style: italic;}

8.4.2 Column Grouping

In a similar way, you can group columns by using the Colgroup element and the col element. Browsers that understand these tags can render the table incrementally, rather than rendering all the tables at once. This allows longer tables to be loaded more quickly. In addition, when you group columns by using the Colgroup element, you can apply style definitions and feature definitions to the entire column group without having to set each column individually.

<colgroup> and </colgroup> tags define one or more columns as a column group, and you can define the rendering style for those columns. You can use the Colgroup tag as a selector in a style sheet to define all the columns in the column group as the same style. You can also add a span property to the colgroup tag to tell the browser how many rows are included in the column group.

1 <TableBorder= "1">2 <Colgroupspan= "5"ID= "Group1"></Colgroup>3 <Colgroupspan= "2"IC= "Group2"></Colgroup>4 <TR>5     <TD>

[Html/html5]8 Use Form