Front-end study notes one by one HTML table tags (table)

Preface

Table is one of the most used tools in web page creation. When creating web page, using table can arrange data more clearly. But in the actual production process, the table is more used for the positioning of the web page layout. Many web pages are laid out in tables. This is because the table has a strong function in the position control of text and images.

1. The basic structure of the form

The table is composed of three parts: row, column, and cell, and is generally created by three tags, namely table tag <table>, row tag <tr>, and cell tag <td>. The various attributes of the table are valid only between the start tag of the <table>table and the end tag of the table </table>.

Create the four elements of the table:

table、tr、th、td

<tabel>...</table>: The entire table <table>starts and </table>ends with a mark .

<tr>...</tr>: One row of the table, so if there are several pairs <tr></td>, the table has several rows.

<td>...</td>: A cell in the table contains several pairs <td></td>in a row, indicating that there are several columns in a row.

<th></th>: A cell in the head of the table, the table header.

The number of columns in the table depends on the number of data cells in a row

<table>
    <tr>
        <th>动物名称</th>
        <th>物种</th>
        <th>生活习性</th>
        <th>食性</th>
    </tr>
    <tr>
        <td>老虎</td>
        <td>猫科动物</td>
        <td>单独活动</td>
        <td>肉食</td>
    </tr>
    <tr>
        <td>狮子</td>
        <td>猫科动物</td>
        <td>集群</td>
        <td>肉食</td>
    </tr>
    <tr>
        <td>大象</td>
        <td>哺乳纲动物</td>
        <td>群居</td>
        <td>草食</td>
    </tr>
</table>

The content is for reference only, and its authenticity is not guaranteed

Table attributes

Table title caption

A table can only have one title

<table></table>Add between the above code<caption>动物世界</caption>

Table width and height

The table width is width, the height isheight

The syntax is<table width="500" height="130">

The following functions are similar to this and will not be sampled

Align of table header

The syntax is<table align="对齐方式">

Fill in the corresponding attribute value in the alignment:

left: left aligned
center: centered
right: right aligned

Table border width

When the border value is not set or set to 0, the display is borderless

The syntax is <table border="5">, 5 is the border width

Bordercolor

The syntax is <table bordercolor="#66ccff">, the specific code corresponding to each color can be found on the Internet

Cellspacing of the inner frame of the table

The width property of the inner frame of the table is used to set the spacing between each cell in the table

The syntax is<table cellspacing="内框宽度值">

Table text and border margin cellpadding

By default, the content of the cell will be close to the border of the table, which will look very crowded, and the distance between them can be set by the word method

The syntax is<table cellspadding="文字与边框距离值">

Table background color bgcolor

The syntax is<table bgcolor="7fffaa">

Table background image background

The syntax is<table background="图片链接">

Table head mark thead

The start tag of the header style is <thead>, and the end tag is </thead>. It is used to define the style of the top of the table, you can set the background color, text alignment, text vertical mode, etc.

Table body tag tbody

The table body mark is similar to the table head mark. The table body style is used to uniformly design the style of the main part of the table, marked as<tbody>

Tfoot

<tfoot>Used to define the footer style

Row attribute

Table row attribute settings

The setting of row attributes in the table is similar to that of the table. You only need to add relevant attribute values ​​to the row labels, such as <tr width="5" height="3" align="content" bordercolor="#66ccff" cellspacing="3">
multiple parameter values ​​separated by spaces

Table row alignment

In addition to the horizontal alignment described in the header alignment above, the row alignment in the table alignalso has vertical alignmentvalign

The syntax is<tr valign="对齐方式">

There may be provided three topvalues: middle, ,bottom

valignCan also be used for cell properties

Cell properties

Cell size

The syntax is<td width="8" height="5">

Horizontal span colspan

When designing a table, sometimes it is necessary to combine two or more adjacent cells into one cell

The syntax is<td colspan="跨度的列数">

Vertical span rowspan

In addition to spanning columns in the horizontal direction, cells can also span rows in the vertical direction

The syntax is<td rowspan="跨度的行数">

Give a piece of example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo</title>
</head>
<body>
    <table width="500" height="300" align="content" border="5" bordercolor="#66ccff" cellspacing="3" bgcolor="7fffaa">
    	<caption>动物世界</caption>
    <tr>
        <th>动物名称</th>
        <th>物种</th>
        <th>生活习性</th>
        <th>食性</th>
    </tr>
    <tr align="center">
        <td>老虎</td>
        <td>猫科动物</td>
        <td>单独活动</td>
        <td rowspan="2">肉食</td>
    </tr>
    <tr align="center">
        <td>狮子</td>
        <td>猫科动物</td>
        <td>集群</td>

    </tr>
    <tr align="center">
        <td>大象</td>
        <td>哺乳纲动物</td>
        <td>群居</td>
        <td>草食</td>
    </tr>
</table>
</body>
</html>