table of Contents
- The basic structure of the table
- Table of standard structure
- Row of the table, column merger
- CSS style table
The basic structure of the table
Form is the most common element on the page, which in addition can be used to display data, it is also commonly used for typesetting. While it is promoting the use of DIV + CSS page layout complete, but simple and clear form the framework for complex data, a compact form make it exhibits very organized.
In simple terms, the table is a row and column (cell) composition. Form of
Tags to define. Each table has a plurality of rows (defined by the tag), each row consists of a plurality of cells (i.e., row by| Label definitions) components. Gerry table cell can contain text, images, lists, paragraphs, forms, horizontal table (nested) and the like. |
Do not wordy, look at the code.
The following code is a table of two rows and two columns.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格开始-->
<tr><!--表格第一行-->
<td>姓名</td><!--第一行第一个单元格-->
<td>张三</td><!--第一行第二个单元格-->
</tr>
<tr><!--表格第二行-->
<td>民族</td><!--第二行第一个单元格-->
<td>汉族</td><!--第二行第二个单元格-->
</tr>
</table><!--表格结束-->
</body>
</html>
The default is no border of the table, the following renderings joined the border, the purpose is to make a table structure more clearly.
Table of standard structure
In addition to the table rows and cells, and may have a title header. Further, the table also semantic form into the header table, the main table, the table footer three parts. Introducing semantic, table structure can make a clearer, more semantic code is good.
The following sample code added to the title and the head, while the introduction of semantic table, the table is divided into a header, body. Footer three sections, tables semantic whether to add to the table will not affect the display.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table><!--表格开始-->
<caption>第一学期学生成绩表</caption><!--表格标题-->
<thead><!--表格页眉-->
<tr><!--第一行-->
<th>姓名</th><!--表头-->
<th>语文</th>
<th>数学</th>
<th>物理</th>
</tr>
</thead>
<tbody><!--表格主体-->
<tr><!--第二行-->
<td>张小明</td>
<td>80</td>
<td>90</td>
<td>80</td>
</tr>
<tr><!--第三行-->
<td>王小花</td>
<td>90</td>
<td>70</td>
<td>80</td>
</tr>
</tbody>
<tfoot><!--表格页脚-->
<tr><!--第四行-->
<td>平均分</td>
<td>85</td>
<td>80</td>
<td>80</td>
</tr>
</tfoot>
</table><!--表格结束-->
</body>
</html>
The default is no border of the table, the following renderings joined the border, the purpose is to make a table structure more clearly.
Row of the table, column merger
In practical application table, it is often necessary to form two or more adjacent cells merge, or different lengths to meet different types of data display.
[Label] rowspan attributes can be achieved consolidated line label] [colspan attribute can achieve a combined basis,Sample code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
/*设置图片的宽和高，防止将表格撑变形*/ img {width:76px; height:82px;}
</style>
</head>
<body>
<table>
<tr><!--第1行-->
<td>姓名:</td>
<td>小叮当</td><!--下面是合并两行-->
<td rowspan="2"><img src="小叮当.jpg"/></td>
</tr>
<tr><!--第2行-->
<td>作品:</td>
<td>哆啦A梦</td>
</tr>
<tr><!--第3行-->
<td>简介:</td><!--下面是合并两列-->
<td colspan="2">来自一部漫画作品</td>
</tr>
</table>
</body>
</html>
The default is no border of the table, the following renderings joined the border, the purpose is to make a table structure more clearly.
CSS style table
The default is no border of the table, we can use the border attribute table to set the border. The code above are added to the border, you can see, the table is double-line border, which is due to table, th and td elements have separate borders. [] Border-collapse property sets whether the table borders into a single frame, the value of the property has two main values of [separate] is the default, meaning no separate border merger, the value of [collapse] to merge the border.
When the border attribute table of the default value of [] [border-collapse separate], i.e., when the borders are separated, we can also use properties] [border-spacing distance between the border of the cell to an adjacent set. This property may be provided with one or two pixel values, a pixel value when set, indicates the horizontal and vertical spacing of the same value; If the two values, the first horizontal pitch, the second vertical spacing.
Sample code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*为表格设置边框样式*/ table,th,td{border:1px solid red;} table.one { /*设置第一个表格为合并边框*/ border-collapse: collapse;
} table.two { /*设置第二个表格为分离边框，同时设置水平间距10px，垂直间距50px*/ border-collapse: separate; border-spacing: 10px 30px }
</style>
</head>
<body>
<table class="one">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<br />
<table class="two">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>
Finally, I recommend a push in the front-end learning exchange group 685 910 553 Advanced ( front-end information-sharing ), no matter which direction you are on Earth,
whether you are welcome to work in a few years you settled in! (Within the group regularly offer free collection of some of the main group of free learning materials and books tidied face questions and answers document!)
If you have any objection to this article, then please write your comments in the article comments at.
If you find this article interesting, please share and forward, or you can look at, you acknowledge and encouragement of our articles.
Wish everyone in the programming this road, farther and farther.