📄 create_table.html
字号:
\* ---------------------------------------------------------------------- */
function previewShadingColor(color) {
document.all.shadingColorPreview.style.backgroundColor = color;
}
/* ---------------------------------------------------------------------- *\
Function : selectShadingColor()
Description : Assigns the selected shading color to
<input type="hidden" id="shadingColor">.
\* ---------------------------------------------------------------------- */
function selectShadingColor(color) {
document.all.shadingColorPreview.style.backgroundColor = color;
document.all.shadingColorMenu.style.display = "none";
document.all['shadingColor'].value = color;
}
</script>
<body bgcolor="#EEEEEE" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" onLoad="init();">
<table border="0" cellpadding="0" cellspacing="0" style="padding: 10px;"><tr><td>
<input type="hidden" name="borderWidth" id="borderWidth" value="0px">
<input type="hidden" name="borderStyle" id="borderStyle" value="solid">
<input type="hidden" name="borderColor" id="borderColor" value="#000000">
<input type="hidden" name="shadingColor" id="borderShading" value="#FFFFFF">
<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Table Properties:</span>
<table width="380" border="0" cellpadding="0" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
<tr>
<td style="padding-bottom: 2px; width: 50px; font-family: arial, verdana, helvetica; font-size: 11px;">Rows:</td>
<td style="padding-bottom: 2px; width: 80px; "><input type="text" size="4" id="rows" name="rows" value="5" style="font-size: 10px; width: 65px;"></td>
<td style="padding-bottom: 2px; width: 80px; font-family: arial, verdana, helvetica; font-size: 11px;">Table Width:
<td style="padding-bottom: 2px; width: 180px; ">
<input type="text" name="tableWidth" value="100" size="10" style="font-size: 10px; width: 65px;">
<select name="widthType" style="margin-right: 10px; font-size: 10px;">
<option value="%">Percent</option>
<option value="px">Pixels</option>
</select>
</td>
</tr>
<tr>
<td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Cols:</td>
<td style="padding-bottom: 2px; padding-top: 0px;"><input type="text" size="4" id="cols" name="cols" value="5" style="font-size: 10px; width: 65px;"></td>
<td style="padding-bottom: 2px; padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Alignment:</td>
<td style="padding-bottom: 2px; padding-top: 0px;">
<select name="alignment" id="alignment" style="margin-right: 10px; font-size: 10px; width: 65px;">
<option value="">Not Set</option>
<option value="Left">Left</option>
<option value="Right">Right</option>
<option value="Center">Center</option>
</select>
</td>
</tr>
<tr>
<td style="padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Padding:</td>
<td style="padding-top: 0px;"><input type="text" size="4" id="padding" name="padding" value="5" style="font-size: 10px; width: 65px;"></td>
<td style="padding-top: 0px; font-family: arial, verdana, helvetica; font-size: 11px;">Collapse:</td>
<td style="padding-top: 0px;"><input type="checkbox" name="borderCollapse" id="borderCollapse"></td>
</tr>
</table>
<br>
<span style="font-family: arial, verdana, helvetica; font-size: 11px; font-weight: bold;">Border Properties:</span>
<table width="380" border="0" cellpadding="5" cellspacing="0" style="background-color: #F7F7F7; border: 2px solid #FFFFFF; padding: 5px;">
<tr>
<td>
<div style="overflow: auto; width: 135px; height: 150px; border: 1px inset #CCCCCC; background-color: #FFFFFF;">
<table border="0" cellpadding="0" cellspacing="0" width="115">
<tr id="No Border" ><td class="off" onClick="selectBorder('No Border');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'" style="font-family: arial, verdana, helvetica; font-size: 11px;"> No Border </td></tr>
<tr id="No Border on" ><td class="on" style="font-family: arial, verdana, helvetica; font-size: 11px;"> No Border </td></tr>
<tr id="solid" ><td class="off" onClick="selectBorder('solid');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 1px solid #000000;"></td></tr>
<tr id="solid on" ><td class="on"><hr style="border: 1px solid #000000;"></td></tr>
<tr id="dashed" ><td class="off" onClick="selectBorder('dashed');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 2px dashed #000000;"></td></tr>
<tr id="dashed on" ><td class="on"><hr style="border: 2px dashed #000000;"></td></tr>
<tr id="dotted" ><td class="off" onClick="selectBorder('dotted');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><hr style="border: 2px dotted #000000;"></td></tr>
<tr id="dotted on" ><td class="on"><hr style="border: 2px dotted #000000;"></td></tr>
<tr id="double" ><td class="off" onClick="selectBorder('double');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border-top-width: 6px; border-top-style: double; border-top-color: #000000; font-size: 1px; margin: 6 0 2 0;"> </div></td></tr>
<tr id="double on" ><td class="on"><div style="border-top-width: 6px; border-top-style: double; border-top-color: #000000; font-size: 1px; margin: 6 0 2 0;"> </div></td></tr>
<tr id="inset" ><td class="off" onClick="selectBorder('inset');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px inset #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="inset on" ><td class="on"><div style="border: 2px inset #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="outset" ><td class="off" onClick="selectBorder('outset');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px outset #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="outset on" ><td class="on"><div style="border: 2px outset #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="groove" ><td class="off" onClick="selectBorder('groove');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px groove #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="groove on" ><td class="on"><div style="border: 2px groove #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="ridge" ><td class="off" onClick="selectBorder('ridge');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><div style="border: 2px ridge #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
<tr id="ridge on" ><td class="on"><div style="border: 2px ridge #DDDDDD; font-size: 4px; padding: 4px;"> </div></td></tr>
</table>
</div>
</td>
<td>
<div style="overflow: auto; width: 135px; height: 150px; border: 1px inset #CCCCCC; background-color: #FFFFFF;">
<table border="0" cellpadding="0" cellspacing="0" width="115">
<tr id="1px" ><td class="off" onClick="selectWidth('1px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">1px </td><td style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; width: 80px;"> </td></tr></table></td></tr>
<tr id="1px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">1px </td><td style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="2px" ><td class="off" onClick="selectWidth('2px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">2px </td><td style="border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="2px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">2px </td><td style="border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="3px" ><td class="off" onClick="selectWidth('3px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">3px </td><td style="border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="3px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">3px </td><td style="border-bottom-width: 3px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="4px" ><td class="off" onClick="selectWidth('4px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">4px </td><td style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="4px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">4px </td><td style="border-bottom-width: 4px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="5px" ><td class="off" onClick="selectWidth('5px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">5px </td><td style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="5px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">5px </td><td style="border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="6px" ><td class="off" onClick="selectWidth('6px');" onMouseOver="this.className = 'on'" onMouseOut="this.className = 'off'"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">6px </td><td style="border-bottom-width: 6px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
<tr id="6px on" ><td class="on"><table cellpaddin="0" cellspacing="0" border="0"><tr><td style="font-family: arial, verdana, helvetica, sans serif; font-size: 12px;">6px </td><td style="border-bottom-width: 6px; border-bottom-style: solid; border-bottom-color: #000000; font-size: 1px; margin: 6 0 0 0; width: 80px;"> </td></tr></table></td></tr>
</table>
</div>
</td>
<td style="font-family: arial, verdana, helvetica; font-size: 11px;" valign="top">
Color:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25"><table border="0" cellpadding="0" cellspacing="0"><tr><td style="width: 25px; background-color: #000000; border: 1px solid #000000; font-size: 10px;" id="borderColorPreview"> </td></tr></table></td>
<td><button style="font-size: 10px; font-family: arial, verdana, helvetica, sans serif; margin-left: 2px; width: 28px;" onClick="showBorderColorMenu();">Pick</button></td>
</tr>
</table>
<div style="position: absolute; right: 30px;" id="borderColorMenu">
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -