html表格，跨行跨列--Javaweb

最新推荐文章于 2023-10-25 23:00:00 发布

MC6058

最新推荐文章于 2023-10-25 23:00:00 发布

阅读量268

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/chenzitian6058/article/details/115918341

版权

Javaweb 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

表格方式一

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编程狮(w3cschool.cn)</title>
</head>
<body> 
<table border = "1" width = "100%">
    <thead>
        <tr>
            <td colspan = "4">This is the head of the table</td>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan = "4">This is the foot of the table</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
    </tbody>         
</table>
</body>
</html>

表格方式二

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>表格标签</title>
</head>
<body>
<!--
table 表格标签
  border 表格边框
  width 宽度
  height 高度
  cellspacing 单元格间距
tr 行标签
th 表头标签
td 单元格标签
  align 单元格对齐方式
b 加粗标签
-->
<table border="1" width="300" height="300" cellspacing="10">
    <tr>
        <td align="center"><b>1.1</b></td>
        <td>1.2</td>
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

</body>
</html>

跨行跨列

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>7.表格的跨行跨列</title>
</head>
<body>
<!--	需求1：
			新建一个五行，五列的表格，
			第一行，第一列的单元格要跨两列，
			第二行第一列的单元格跨两行，
			第四行第四列的单元格跨两行两列。

			colspan 属性设置跨列
			rowspan 属性设置跨行
			-->

<table width="500" height="500" cellspacing="0" border="1">
	<tr>
		<td colspan="2">1.1</td>
		<td>1.3</td>
		<td>1.4</td>
		<td>1.5</td>
	</tr>
	<tr>
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
		<td>2.5</td>
	</tr>
	<tr>
		<td>3.2</td>
		<td>3.3</td>
		<td>3.4</td>
		<td>3.5</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td colspan="2" rowspan="2">4.4</td>
	</tr>
	<tr>
		<td>5.1</td>
		<td>5.2</td>
		<td>5.3</td>
	</tr>
</table>
</body>
</html>

MC6058

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
html表格，跨行跨列--Javaweb

表格<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表格标签</title><
复制链接

扫一扫