HTML tables and lists_html/css_WEB-ITnose-HTML Tutorial-php.cn

HTML table

A table is actually a lot of small cells, and these small cells are arranged in an orderly manner. They have many rows and columns. These things composed of many rows and columns are called tables, and tables are defined by the

tag. The rows in the

tag are the tags, and the columns are the

tags. Rows must be defined before columns can be defined. Because in html, each column is in a row.

The following table summarizes some commonly used tags:

below the above comment are written anyway. A very small table will appear, but the text written in will not be displayed

So in HTML, writing a table must be written line by line.

The tag contains

表格

描述


定义表格

定义表格标题
		定义表格的表头

定义表格的行
		定义表格的单元

定义表格的页眉

定义表格的主体

定义表格的页脚

定义表格的列属性

First define a simple table:

You can see it after running

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table border="1">            <tr>                <td>水果</td>                <td>水果</td>                <td>水果</td>            </tr>    <!-- 下面将td与tr反正写了，是不会构成表的 -->            <td>                <tr>asd</tr>                <tr>asd</tr>                <tr>asd</tr>                <tr>asd</tr>            </td>        </table>    </body></html>

Copy after login

As you can see, the

and

Table without borders

A table without borders is actually in the

tag without adding Property border. The border attribute represents the border of the table. If no attribute is added, the default border="0" will be used. However, if there is no border, sometimes you will not be able to tell that it is a table. So sometimes a 1-pixel border is set for border="1px". Temporarily remove the border attribute and complete a table without borders

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table>            <tr>                <td>呵呵</td>                <td>哈哈</td>                <td>嘻嘻</td>            </tr>            <tr>                <td>嘿嘿</td>                <td>嘎嘎</td>                <td>噗噗</td>            </tr>            <tr>                <td>啊啊</td>                <td>哦哦</td>                <td>噢噢</td>            </tr>        </table>    </body></html>

Copy after login

in the table The header

You can also add a header to the table, using the

tag. For the sake of better appearance, we still add the border:

<!DOCTYPE html><html>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <table border="1">            <tr>                <th>人物</th>                <th>介绍</th>                <th>产品</th>            </tr>            <tr>                <td>史蒂夫&middot;保罗&middot;乔布斯</td>                <td>苹果CEO</td>                <td>Apple系列</td>            </tr>            <tr>                <td>丹尼斯&middot;里奇</td>                <td>C语言之父</td>                <td>C语言</td>            </tr>            <tr>                <td>比尔&middot;盖茨</td>                <td>微软CEO</td>                <td>Windows系统</td>            </tr>        </table>    </body></html>

Copy after login

You can also set the margins within the table The cellpadding attribute
can also set the cell margins cellspacing attribute

<table border="1" cellpadding="10" cellspacing="10">    <tr>        <td>xxx</td>    </tr></table>

Copy after login

Table with title

I am the header

tag,

The tag is also in the

<table border="1" cellpadding="10" cellspacing="10">            <caption>xxx表</caption>            <tr>                <td>xxx</td>            </tr></table>

Copy after login

The color bgcolor attribute in the table

<table border="1" bgcolor="red">    <tr>        <td>xxx</td>    </tr></table>

Copy after login

The align attributes of cell content arrangement are center, left, right

<table border="1" align="center">    <caption>xxx表</caption>    <tr>        <td>xxx</td>    </tr></table>

Copy after login

Colspan attribute of cells across rows and columns, to be precise, merged cells

<table border="1">    <caption>xxx表</caption>    <tr>        <td colspan="2">xxx</td>        <td>xxx</td>    </tr>    <tr>        <td>xxx</td>        <td>xxx</td>        <td>xxx</td>    </tr></table>

Copy after login