HTML学习笔记08-表格

HTML表格

表格由<table>标签来定义，表格的行由<tr>标签来定义，表格的列由<td>标签来定义

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

</body>
</html>

border=1是设置边框的粗细，不需要边框，可以去掉

 

使用<th>标签定义表头，大部分浏览器会把表头加粗居中显示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

</body>
</html>

 

 

 

跨格表格使用colspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
    <tr>
        <th colspan="2">单元格跨两格</th>
    </tr>
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>

</body>
</html>

 

 

跨列表格使用rowspan属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>表格</title> 
</head>

<body>
<table border="1">
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td rowspan="2">单元格跨两列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第二列</td>
    </tr>
</table>

</body>
</html>

 

 

posted @ 2018-06-27 13:23  梦忆安凉  阅读(165)  评论(0)  编辑  收藏  举报