html表格设置

表格

表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格和边框属性

如果不定义边框属性,表格将不显示边框。有时这很有用,但是大多数时候,我们希望显示边框。

使用边框属性来显示一个带有边框的表格:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

表格的表头

表格的表头使用 <th> 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器显示如下:

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格中的空单元格

在一些浏览器中,没有内容的表格单元显示得不太好。如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td></td>
<td>row 2, cell 2</td>
</tr>
</table>

浏览器可能会这样显示:

注意:这个空的单元格的边框没有被显示出来。为了避免这种情况,在空单元格中添加一个空格占位符,就可以将边框显示出来。

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>row 2, cell 2</td>
</tr>
</table>

在浏览器中显示如下:

row 1, cell 1 row 1, cell 2
  row 2, cell 2
时间: 2024-10-11 09:54:15

html表格设置的相关文章

Excel2007给表格设置成只读加密属性 让他人无法修改

在制作一些报表和公司的表格时,我们常常需要给Excel表格加密或者设置成只读属性来加以防护这些重要表格.给表格加密可以预防他人无法打开表格,只有通过输入正确的密码后才可以正常打开.设置成只读的话,可以预防他人修改文件,只能读取表格,除非输入正确的密码后才可以修改表格中内容.Excel加密技巧Word联盟前面已经讲过了,今天来给大家讲解下Excel2007中如何给表格设置成只读属性! ①在Excel2007中单击“Office按钮”,在弹出菜单栏中选择“另存为”中的“Excel工作薄”命令: ②在

给表格设置border还可以这样玩

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#ff0000"> <tr> <td> </td> </tr> </table> 将cellspacing设置成几,表格的border就为几,将bgcolor设置成什么颜色,表格的border就

【table】给table表格设置一个通用的css3样式(默认有斑马条纹)

/* = 表格(默认有斑马条纹) ------------------------------------------ */ .data-table { margin: 10px 0; } .data-table table { width: 100%; border-collapse: collapse; //设置表格边框合并为单一边框 } .data-table caption { height: 30px; line-height: 30px; font-weight: 700; } .d

aspose.cell 给excel表格设置样式

方法1: Style styleTitle = workbook.Styles[workbook.Styles.Add()];//新增样式 styleTitle.HorizontalAlignment = TextAlignmentType.Center;//文字居中 styleTitle.Font.Name = "宋体";//文字字体 styleTitle.Font.Size = 15;//文字大小 styleTitle.Font.IsBold = true;//粗体 styleTi

EasyUI的-表格设置

<table id="tt"  title="Formatting Columns"  class="easyui-datagrid"  style="width:550px;height:250px" url="data/datagrid_data.json" singleSelect="true"  iconCls="icon-save"> id=&q

java主界面表格(设置行数和只读)(1)2018.8.23

package example; import java.awt.BorderLayout;import java.awt.Color;import java.util.Vector; import javax.swing.AbstractButton;import javax.swing.JFrame;import javax.swing.JMenu;import javax.swing.JMenuBar;import javax.swing.JMenuItem;import javax.sw

jqGrid弹出表格设置分页

点击时候方法 // 成员人数 function modify6(rows){ $("#table_list_2").jqGrid("clearGridData"); $("#table_list_2").jqGrid('setGridParam',{ datatype:"json", postData:{ "id":rows.club_id }, url:"", }).trigger(&

修复Extjs5.1.4表格设置enableTextSelection: true之后,文本仍然不能选择的BUG

如果您发现其他版本也有此BUG,可参照此方式进行修复,源代码中多了一句拦截mousedown事件的代码mousedownEvent.preventDefault()造成的. Ext.define('Ext.override.grid.NavigationModel',{ override:'Ext.grid.NavigationModel', onCellMouseDown: function(view, cell, cellIndex, record, row, recordIndex, mo

设置表格单双行颜色

<script type="text/javascript"> $(document).ready(function () { $("table").attr("bgColor", "#222222"); //设置表格的背景颜色 $("tr").attr("bgColor", "#3366CC"); //为单数行表格设置背景颜色 $("tr:ev