html里的table怎样实现跨行和跨列

Posted 2023-04-08

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html里的table怎样实现跨行和跨列相关的知识，希望对你有一定的参考价值。

表格单元横跨两列的表格：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>

表格单元横跨两行的表格：
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100.00</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$10.00</td>
</tr>
</table> 参考技术A <td colspan=3> 跨行
<td rowspan=3> 跨列

领跑计划Day004Html

表格和其他的补充

1.表格：

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

<!--
	colspan 跨列
	rowspan 跨行
-->
    <table>
        <thead>
            <tr>
                <th colspan="2">The table header</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">The table body</td>
                <td>with two columns</td>
            </tr>
            <tr>
                <td>with two columns</td>
            </tr>
        </tbody>
    </table>
<!--简单写法-->
<table>
  <tr>
    <th>John</th>
    <th>Doe</th>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
  </tr>
</table>

2.下拉菜单：

HTML <select> 元素表示一个提供选项菜单的控件：

<!--
	name 发送数据的名
	id id
	value 发送的值
	selected 选中
-->
    <select name="city" id="city">
        <option value="city1">city1</option>
        <option value="city2">city2</option>
        <option value="city3">city3</option>
        <option value="city4" selected>city4</option>
        <option value="city5">city5</option>
        <option value="city6">city6</option>
        <option value="city7">city7</option>
        <option value="city8">city8</option>
        <option value="city9">city9</option>
        <option value="city10">city10</option>
    </select>

3.内联标签

HTML内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

    <!-- http://api.map.baidu.com/lbsapi/creatmap/index.html 百度地图iframe内链 -->
    <iframe src="https://www.bilibili.com" frameborder="0"></iframe>
    <iframe src="http://player.bilibili.com/player.html?    aid=548978687&bvid=BV1fq4y1g7hq&cid=434684587&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">   </iframe>

textarea补充

HTML内联框架元素 (<iframe>) 表示嵌套的browsing context。它能够将另一个HTML页面嵌入到当前页面中。

<label for="story">Tell us your story:</label>
<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

autocapitalize

iOS的非标准属性（运行在iOS上的Safari、Firefox、Chrome都支持），文本是否自动首字母大写。在iOS5和之后的版本上有效。可能的值为：

none: 禁用首字母大写。
sentences: 句子的首字母大写。
words: 单词或者字母的首字母大写。
characters: 全部字母大写。
on: 自iOS 5废弃。
off: 自iOS 5废弃。

autocomplete

是否使用浏览器的记忆功能自动填充文本。可能的值有：

off: 不使用浏览器的记忆自动填充，使用者必须输入他们想要输入的所有内容。或者网页提供了自己的自动填充方法。
on: 浏览器根据用户之前输入的内容或者习惯，在用户输入的时候给出相应输入提示。

如果不指明autocomplete属性，浏览器会从父级的表单元素上解析是不是开启这个属性。表单元素可以是textarea元素的父级](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form)或者`textarea`有跟表单相同的id（参见下面的form属性）。更多请查看[的autocomplete 属性。

autofocus

页面加载完毕之后是否自动给本元素添加焦点。只有跟表格关联的才能使本属性生效。

cols

文本域的可视宽度。必须为正数，默认为20 (HTML5)。

disabled

禁用文本域。默认为false。如果未指定，也可以从父级上继承而来。

form

指定跟自身相关联的表单。值必须为本文档内的表单的ID，如果未指定，就是跟当前所在的表单元素相关联。这就允许你在文档的任意地方放置文本域元素。

maxlength

允许用户输入的最大字符长度 (Unicode) 。未指定表示无限长度。

minlength

允许用户输入的最小字符长度(Unicode)

name

元素的名称。

placeholder

向用户提示可以在控件中输入的内容。在渲染提示时，占位符文本中的回车符(\\r)或换行符(\\n)一定会被作为行断（换行）处理。

Note: Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper `` element tied to the input. See Labels and placeholders in : The Input (Form Input) element for a full explanation.

readonly

不允许用户修改元素内文本。和 disabled 属性不同的是，这个能让用户点击和选择元素内的文本。如果在表单里，这个元素的值还是会跟随表单一起提交。

required

提示用户这个元素的内容必填。

rows

元素的输入文本的行数（显示的高度）。

spellcheck

该属性设为true时，表明该元素会做拼写和语法检查。属性值为default时，表明元素有默认行为，可能会基于父元素的spellcheck值。属性值为false时，表明元素不做拼写和语法检查。

wrap

指定文本换行的方式。默认为soft。可能的值为：