html表单及表格

最新推荐文章于 2024-08-16 22:57:43 发布

sur_haha

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量499

点赞数 12

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/sur_haha/article/details/135621707

版权

无序列表：

<body>
    <nav>
        <ul>
            <li>好好学习</li>
            <li>好好学习</li>
            <li>好好学习</li>    
        </ul>
     </nav>
</body>

有序列表：


<body>
    <nav>
        <ol>
            <li>天天向上</li>
            <li>天天向上</li>
            <li>天天向上</li>    
        </ol>
     </nav>
</body>

自定义列表：


<body>
    <nav>
        <dl>
            <li>天天开心</li>
            <li>天天开心</li>
            <li>天天开心</li>    
        </dl>
     </nav>
</body>

表现出来的样式分别如下：

从左到右依次是无序列表、有序列表、自定义列表

html的基本结构：

html包括<table>...</table>、<tr>...</tr>、<td>...</td>这三种标签，均为双标签，不可单独使用。

<table>...</table>为表格框架，<tr>...</tr>为表格的行（横着），<td>...</td>为表格的列（竖着）

“border”为外边框，显示表格边框，通常和<table>...</table>搭配使用。

<table border="1">...</table>或<table border="">...</table>显示边框

例如：

<body>
    <table border="1">
        <tr>
            <td>学习</td>
            <td>学习</td>
            <td>学习</td>
            <td>学习</td>
        </tr>
    </table>
</body>

表现形式如下：

若没有"border"属性，则表现形式为：

表格表头：<th>...</th>

例如：

<body>
		<table border="1">
			<tr>
				<th>第一</th>
				<th>第二</th>
				<th>第三</th>
			</tr>
			<tr>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
		</table>
	</body>

表现形式：

表格标题：<caption>...</caption>

例如：

<body>
		<table border="1">
			<caption>表格标题</caption>
			<tr>
				<th>第一</th>
				<th>第二</th>
				<th>第三</th>
			</tr>
			<tr>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
		</table>
	</body>

表现形式：

注意：每个表格只能有一个标题

表格单元格的合并：

跨列合并：colspan

跨行合并：rowspan

跨列合并例如：

<body>
		<table border="1">
			<tr>
				<td colspan="3">学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
			<tr>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
		</table>
	</body>

表现形式：

跨行合并例如：

<body>
		<table border="1">
			<tr>
				<td rowspan="3">学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
			<tr>
				<td>学习</td>
				<td>学习</td>
				<td>学习</td>
			</tr>
			<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>

表现形式：