Enlaces
Tuesday, July 31, 2012, 06:52 PM - Herramientas HTML
Herramienta para crear tablas con previsualizacion y darle mas estilo a nuestras paginasnew_table.php
<html>
<!--
=============================================================
Copyright (C) 2004 Alex B
This file is part of Bumpy Tables.
Bumpy Tables is free software; you can redistribute it and/or modify
===============================================================
-->
<head>
<title>Bumpy Tables v1.0 - New Table</title>
<style type="text/css">
td {
text-align: right;
color: #0033CC;
font-family: verdana;
font-size: 12px;
}
td.n {
text-align: right;
color: #555555;
font-family: verdana;
font-size: 12px;
}
body {
background: #99CCFF;
}
span.red {
color: red;
}
span.orange {
color: orange;
}
span.green {
color: green;
}
span.yellow {
color: yellow;
}
span.black {
color: black;
}
</style>
</head>
<body>
<h4 align="center" style="font-size: 22;font-family:sans-serif;color: #222222;letter-spacing: 0.07cm">Bumpy Tables V1.0<br />
<hr width="100%"></h4>
<h4>Step 1 - Create a new table</h4>
<p>Please enter the table details and values below:</p>
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>
<form action="table.php" method="POST">
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>Border 1 or 0 (0 = no border):</td>
<td><input type="text" name="border" /></td>
</tr>
<tr>
<td>Border style:<span class="black"> *</span></td>
<td><input type="text" name="border_type" /></td>
</tr>
<tr>
<td>Border color:<span class="orange"> *</span></td>
<td><input type="text" name="border_color" /></td>
</tr>
<tr>
<td>Width of the table:<span class="red"> *</span></td>
<td><input type="text" name="width" /></td>
</tr>
<tr>
<td>Height of the table:<span class="red"> *</span></td>
<td><input type="text" name="height" /></td>
</tr>
<tr>
<td>Cellspacing value:</td>
<td><input type="text" name="cspacing" /></td>
</tr>
<tr>
<td>Cellpadding value:</td>
<td><input type="text" name="cpadding" /></td>
</tr>
<tr>
<td>Table background color:<span class="orange"> *</span></td>
<td><input type="text" name="t_bgcolor" /></td>
</tr>
<tr>
<td>Rows:</td>
<td><input type="text" name="rows" /></td>
</tr>
<tr>
<td>Cols:</td>
<td><input type="text" name="cols" /></td>
</tr>
<tr>
<td>Cell background color:<span class="orange"> *</span></td>
<td><input type="text" name="td_bgcolor" /></td>
</tr>
<tr>
<td>Cell font color:<span class="orange"> *</span></td>
<td><input type="text" name="td_color" /></td>
</tr>
<tr>
<td>Cell font family:<span class="green"> *</span></td>
<td><input type="text" name="td_family" /></td>
</tr>
<tr>
<td>Cell font size:</td>
<td><input type="text" name="td_size" /></td>
</tr>
<tr>
<td>Cell content alignment:<span class="yellow"> *</span></td>
<td><input type="text" name="td_align" /></td>
</tr>
<tr>
<td>Page background color (optional):<span class="orange"> *</span></td>
<td><input type="text" name="bgcolor" /></td>
</tr>
<tr>
<td><input type="submit" value="Step 2" /></td>
</tr>
</table>
</form>
</td>
<td valign="top" width="50%" class="n">
<h5 align="center">Notes:</h5><br />
<center>
<span class="orange">* </span>Enter a <a href="colores.php" target="_blank">color code</a> or a color name eg: blue, yellow, red etc.
<br /><br />
<span class="red">* </span>The width and height values can be in % "eg: 100% (of the browser window)" or in pixels "eg: 50px"
<br /><br />
<span class="green">* </span>Valid font families would be: verdana, arial, sans-serif etc.
<br /><br />
<span class="yellow">* </span>Possible values: left, center, right
<br /><br />
<span class="black">* </span>Styles:
dotted, dashed, solid, double, ridge, inset, outset
</td>
</center>
</tr>
</table>
<div align="center">
©<a href="index.php">Bumpy Tables 2004</a> <br />
</div>
</body>
</html>table.php
<?php
/*
=============================================================
Copyright (C) 2004 Alex B
This file is part of Bumpy Tables.
===============================================================
*/
//////////////////////////
////Bumpy Tables Start///
/////////////////////////
$border=$_POST["border"];
$width=$_POST["width"];
$height=$_POST["height"];
$bgcolor=$_POST["bgcolor"];
$cspacing=$_POST["cspacing"];
$cpadding=$_POST["cpadding"];
$t_bgcolor=$_POST["t_bgcolor"];
$td_bgcolor=$_POST["td_bgcolor"];
$td_color=$_POST["td_color"];
$td_family=$_POST["td_family"];
$td_size=$_POST["td_size"];
$td_align=$_POST["td_align"];
$border_size=$_POST["border_type"];
$border_color=$_POST["border_color"];
echo "
<!DOCTYPE html
PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<title>Table Generated</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<!-- Style Start -->
<style type=\"text/css\">
body {
background: $bgcolor;
}
table {
height: $height;
background: $t_bgcolor;
border: $border_type $border_color;
border-width: $border_width;
}
td {
background: $td_bgcolor;
color: $td_color;
font-family: $td_family;
font-size: $td_size;
text-align: $td_align;
}
</style>
<!-- Style End -->
</head>
<body>
<!-- Table Start -->
<table border=\"$border\" width=\"$width\" cellspacing=\"$cspacing\" cellpadding=\"$cpadding\">
";
function showtable()
{
$cols=$_POST["cols"];
$rows=$_POST["rows"];
for ($x=1; $x<=$rows; $x++) {
echo "<tr>\n";
for ($y=1; $y<=$cols; $y++) {
echo "<td>Text</td>\n";
}
echo "</tr>\n";
}
}
$show=showtable();
echo $show;
echo "
</table>
<!-- Table End -->
</body>
</html>
<!--COPY THE TABLE AND STYLE OR ALL ABOVE-->
<!--DO NOT COPY BELOW THIS LINE -->
<br /><br /><br />
<h4>
Above you have a preview of the table. If you need to make any modifications, hit your browsers back buttong to return to Step 1.
<hr />
Step 3:
<br />
View the page source (IE: View > Source)<br /><br />
Copy the Table AND the Style OR all the html to your file eg:(table.html) (make sure the style remains in the head section of your document)
<br /><br/ >
Step 4:
<br />
Replace \"Text\" with your own content.
</h4>
";
?>
colores.php
<?php
print "<html>";
print "<body>";
print "<h1><center>Background colours</center></h1>";
print "<table border='1' align='center'>";
$pos = 1;
$tabcol = 0;
$col1 = 0;
$col2 = 0;
$col3 = 0;
$col4 = 0;
$col5 = 0;
$col6 = 0;
$xcolour = "0123456789ABCDEF";
//loop statement(line)
while ($col1 + $col2 + $col3 + $col4 +$col5 + $col6 < 90)
{
if ($tabcol == 0)
{
print "<tr>";
}
$tabcol = $tabcol + 1;
$xcellcol = '#'.substr($xcolour,$col1,1).substr($xcolour,$col2,1).substr($xcolour,$col3,1).substr($xcolour,$col4,1).substr($xcolour,$col5,1).substr($xcolour,$col6,1);
// print "<td width='10%' bgcolor='$xcellcol'>$xcellcol</td>";
print "<td width='10%' bgcolor='$xcellcol'>";
if ($col1 + $col3 + $col5 < 24)
{
print "<font color='FFFFFF'>";
}
print "$xcellcol</td>";
$col6 = $col6 + 3;
if ($col6 >15)
{
$col5 = $col5 + 3;
$col6 = 0;
if ($col5 >15)
{
$col4 = $col4 + 3;
$col5 = 0;
if ($col4 >15)
{
$col3 = $col3 + 3;
$col4 = 0;
if ($col3 >15)
{
$col2 = $col2 + 3;
$col3 = 0;
if ($col2 >15)
{
$col1 = $col1 + 3;
$col2 = 0;
}
}
}
}
}
if ($tabcol > 5)
{
$tabcol = 0;
print "</tr>";
}
}
print "</table>";
print "</body>";
print "</html>";
?>
para empezar a trabajar ejecutan el archivo new_table.php