html-表格<table>

表格标签

: 表格框架
: 表格头部
: 表格主体
:表头- - -加粗居中
:行
:列

表格常用属性

border:表格边框的宽度,eg:…表示表格宽度为1
width:设置表格的宽度
height:设置表格的高度
align:表格中内容的排列方式,eg:…表示内容居中显示
cellspacing:单元格和表格外边框之间的宽度,不写改属性时,默认是有间隙的,设置cellspacing="0"后,间隙消除
cellpadding:单元格内的内容和单元格边框之间的宽度

注意:以上这些属性是要写在

标签中

如果要合并单元格,可使用rowspan、colspan两个属性
rowspan:行合并
colspan:列合并
合并方法:
1.首先确定要合并的单元格
2.编写rowspan/colspan=“合并单元格数量”,行合并在要合并的最上面一个单元格中写rowspan,列合并在要合并的最左边一个单元格中写colspan
3.删除剩下被合并的单元格

注意:这两个属性写在

标签中

小提示 - - -表格其他属性和查阅手册或百度具体查看

代码示例

代码示例1:

<table>
        <thead>
            <tr>
                <th>姓名th>
                <th>性别th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>小红td>
                <td>td>
                <td>8td>
            tr>
            <tr>
                <td>小明td>
                <td>td>
                <td>9td>
            tr>
        tbody>
    table>

代码示例1效果:
示例1效果.png

代码示例2:

<table border="1">
        <thead>
            <tr>
                <th>姓名th>
                <th>性别th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>小红td>
                <td>td>
                <td>8td>
            tr>
            <tr>
                <td>小明td>
                <td>td>
                <td>9td>
            tr>
        tbody>
    table>

代码示例2效果:
html-表格<table>_第1张图片

代码示例3:

<table border="1" width="300" height="150">
        <thead>
            <tr>
                <th>姓名th>
                <th>性别th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>小红td>
                <td>td>
                <td>8td>
            tr>
            <tr>
                <td>小明td>
                <td>td>
                <td>9td>
            tr>
        tbody>
    table>

示例3效果:
html-表格<table>_第2张图片
代码示例4:

姓名 性别 年龄
小红 8
小明 9

示例4效果:
html-表格<table>_第3张图片

代码示例5:

姓名 性别 年龄
小红 8
小明 9

示例5效果:
html-表格<table>_第4张图片

代码示例6:

<table border="1" width="300" height="150" align="center" cellspacing="0" cellpadding="30">
        <thead>
            <tr>
                <th>姓名th>
                <th>性别th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>小红td>
                <td>td>
                <td>8td>
            tr>
            <tr>
                <td>小明td>
                <td>td>
                <td>9td>
            tr>
        tbody>
    table>

示例6效果:
html-表格<table>_第5张图片

代码示例7:

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <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>

示例7效果:
html-表格<table>_第6张图片

代码示例8:

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <tr>
            <td>td>
            <td colspan="2">td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
            <td>td>
        tr>
    table>

示例8效果:
html-表格<table>_第7张图片
代码示例9:

<table border="1" cellspacing="0" align="center" width="300" height="150">
        <tr>
            <td>td>
            <td colspan="2">td>
        tr>
        <tr>
            <td rowspan="2">td>
            <td>td>
            <td>td>
        tr>
        <tr>
            <td>td>
            <td>td>
        tr>
    table>

示例9效果:
html-表格<table>_第8张图片

你可能感兴趣的:(html)