Nothing wrong with tables, as long as you don't build a house with them. Wink
Very sharp NinjaThe Ninja Space Goat wrote:yea, leave the house building to css...
Moderator: General Moderators
Nothing wrong with tables, as long as you don't build a house with them. Wink
Very sharp NinjaThe Ninja Space Goat wrote:yea, leave the house building to css...
Interesting. Mind to share the actual data/code?Everah wrote:the sad thing is the data I was using was tabular in nature, and the display of that data still worked better with CSS DIVs than with a table.
Yeah, sometimes, data in divs just ... well, float better..Everah wrote:the sad thing is the data I was using was tabular in nature, and the display of that data still worked better with CSS DIVs than with a table.
Code: Select all
.data-row {
float: left;
overflow: hidden;
width: 100%;
text-align: center;
display: block;
border-bottom: solid 1px #000000;
}
.data-row input.plain {
text-align: left;
background-color: #ffffff;
border: none;
text-decoration: underline;
color: #da3829;
padding-right: 0.5em;
cursor: pointer;
}
.data-header {
background-color: #993333;
color: #ffffff;
font-weight: bold;
}
.data-footer {
float: left;
overflow: hidden;
width: 100%;
text-align: center;
display: block;
background-color: #993333;
color: #ffffff;
font-weight: bold;
}
.data-cell-index {
float: left;
width: 3%;
text-align: left;
}
.data-cell-10 {
float: left;
width: 10%;
text-align: left;
}
.data-cell-15 {
float: left;
width: 15%;
text-align: left;
}
.data-cell-20 {
float: left;
width: 20%;
text-align: left;
}
.data-cell-25 {
float: left;
width: 25%;
text-align: left;
}
.data-cell-30 {
float: left;
width: 30%;
text-align: left;
}
.data-cell-40 {
float: left;
width: 40%;
text-align: left;
}
.data-cell-45 {
float: left;
width: 45%;
text-align: left;
}
Code: Select all
<div class="data-row data-header">
<div class="data-cell-index"> </div>
<div class="data-cell-30">Name</div>
<div class="data-cell-15">Phone(s)</div>
<div class="data-cell-25">Edit</div>
<div class="data-cell-25">Delete</div>
</div>
<form method="post" action="#">
<div class="data-row">
<div class="data-cell-index">1</div>
<div class="data-cell-30">Jimbo Bob</div>
<div class="data-cell-15"> </div>
<div class="data-cell-25">
<input type="hidden" name="contact_id" value="999999" />
<input type="submit" name="edit" value="Edit Jimbo Bob" class="plain" />
</div>
<div class="data-cell-25">
<input type="submit" name="delete" value="Delete Jimbo Bob" class="plain" />
</div>
</div>
</form>
<form method="post" action="#">
<div class="data-row">
<div class="data-cell-index">2</div>
<div class="data-cell-30">Billy Bob</div>
<div class="data-cell-15">888-555-4444</div>
<div class="data-cell-25">
<input type="hidden" name="contact_id" value="999999" />
<input type="submit" name="edit" value="Edit Billy Bob" class="plain" />
</div>
<div class="data-cell-25">
<input type="submit" name="delete" value="Delete Billy Bob" class="plain" />
</div>
</div>
</form>
<form method="post" action="#">
<div class="data-row">
<div class="data-cell-index">3</div>
<div class="data-cell-30">Joe Bob</div>
<div class="data-cell-15"> </div>
<div class="data-cell-25">
<input type="hidden" name="contact_id" value="999999" />
<input type="submit" name="edit" value="Edit Joe Bob" class="plain" />
</div>
<div class="data-cell-25">
<input type="submit" name="delete" value="Delete Joe Bob" class="plain" />
</div>
</div>
</form>
<form method="post" action="#">
<div class="data-row">
<div class="data-cell-index">4</div>
<div class="data-cell-30">Uncle Bob</div>
<div class="data-cell-15">888-555-6666</div>
<div class="data-cell-25">
<input type="hidden" name="contact_id" value="999999" />
<input type="submit" name="edit" value="Edit Uncle Bob" class="plain" />
</div>
<div class="data-cell-25">
<input type="submit" name="delete" value="Delete Uncle Bob" class="plain" />
</div>
</div>
</form>
<div class="data-footer">This simulates a table footer (TFOOT) tag</div>
Code: Select all
table { width:100%; }
th, tfoot { background:#933; font-weight:bold; color:#fff; }
th, td { border-bottom:1px solid #000; text-align:left; }
tfoot td { border-bottom:none; text-align:center; }
a { color:#da3829; }Code: Select all
<table cellspacing="0">
<tfoot>
<tr>
<td colspan="5">This is a table footer (TFOOT) tag</td>
</tr>
</tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Phone(s)</th>
<th>Edit</th>
<th>Delete</th>
</tr>
<tr>
<td>1</td>
<td>Jimbo Bob</td>
<td></td>
<td><a href="edit.php?id=1">Edit Jimbo Bob</a></td>
<td><a href="delete.php?id=1">Delete Jimbo Bob</a></td>
</tr>
<tr>
<td>2</td>
<td>Billy Bob</td>
<td></td>
<td><a href="edit.php?id=2">Edit Billy Bob</a></td>
<td><a href="delete.php?id=2">Delete Billy Bob</a></td>
</tr>
<tr>
<td>3</td>
<td>Joe Bob</td>
<td></td>
<td><a href="edit.php?id=3">Edit Joe Bob</a></td>
<td><a href="delete.php?id=3">Delete Joe Bob</a></td>
</tr>
<tr>
<td>4</td>
<td>Uncle Bob</td>
<td></td>
<td><a href="edit.php?id=4">Edit Uncle Bob</a></td>
<td><a href="delete.php?id=4">Delete Uncle Bob</a></td>
</tr>
</table>Using POST may cause hackers to have a little more work, but what do you gain by it? Security through obscurity? Your filtering system at the server side stays the same, right? Anyway, I just simplified your markup to show off the visual CSS layout in first place.Everah wrote:except your passing everything through GET, which I am opposed to. It is a little more inconvenient for hackers to have to mock forms than it is to just throw any number they want into the URL.
Hardly can believe that writing your CSS was easier and faster than my 5 lines. And even if you say so, there's still the story of the semantic web. Standards don't necessarily have anything to do with being semantically correct. By using a div soup in this case, the tabular relationship between the elements is lost.Everah wrote:I do agree that it was a tabular dataset. But it was actually easier and faster for me to just use CSS.
Yes.GeertDD wrote:Using POST may cause hackers to have a little more work, but what do you gain by it? Security through obscurity?
Yes.GeertDD wrote:Your filtering system at the server side stays the same, right?
It was easier for me to write the CSS. You can believe that or not, it is your choice. I agree with your take on the semantics of it.GeertDD wrote:Hardly can believe that writing your CSS was easier and faster than my 5 lines. And even if you say so, there's still the story of the semantic web. Standards don't necessarily have anything to do with being semantically correct. By using a div soup in this case, the tabular relationship between the elements is lost.
how bout a css tableEverah wrote:You spend two hours customizing a table just to find out that it doesn't validate with the rest of your markup, then you spend 5 minutes banging our a CSS solution that validates XHTML on the first run and actually performs better than your table.
Me hates tables. But I love CSS.
Code: Select all
/*Employee*/
#f_title_employee
{ background:black;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Joe_employee
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Jack_employee
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Roger_employee
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_employee
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
/*Monday*/
#f_title_monday
{ background:black;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Joe_monday
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Jack_monday
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Roger_monday
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_monday
{ background:white;
width:85px;
float:left;
border: solid 1px black;
margin:0px;
}
/*Tuesday*/
#f_title_tuesday
{ background:black;
width:80px;
float:left;
border: solid 1px black;
margin:0px;
}
#f_Joe_tuesday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Jack_tuesday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Roger_tuesday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_tuesday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
/*Wednesday*/
#f_title_Wednesday
{ background:black;
float:left;
width:100px;
border: solid 1px black;
margin:0px;
}
#f_Joe_Wednesday
{ background:white;
float:left;
width:100px;
border: solid 1px black;
margin:0px;
}
#f_Jack_Wednesday
{ background:white;
float:left;
width:100px;
border: solid 1px black;
margin:0px;
}
#f_Roger_Wednesday
{ background:white;
float:left;
width:100px;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_Wednesday
{ background:white;
float:left;
width:100px;
border: solid 1px black;
margin:0px;
}
/*Thursday*/
#f_title_thursday
{ background:black;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Joe_thursday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Jack_thursday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Roger_thursday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_thursday
{ background:white;
float:left;
width:80px;
border: solid 1px black;
margin:0px;
}
/*Friday*/
#f_title_friday
{ background:black;
float:left;
width:75px;
border: solid 1px black;
margin:0px;
}
#f_Joe_friday
{ background:white;
float:left;
width:75px;
border: solid 1px black;
margin:0px;
}
#f_Jack_friday
{ background:white;
float:left;
width:75px;
border: solid 1px black;
margin:0px;
}
#f_Roger_friday
{ background:white;
float:left;
width:75px;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_friday
{ background:white;
float:left;
width:75px;
border: solid 1px black;
margin:0px;
}
/*Email*/
#f_title_email
{ background:black;
float:left;
width:209px;
border: solid 1px black;
margin:0px;
}
#f_Joe_email
{ background:white;
float:left;
width:209px;
border: solid 1px black;
margin:0px;
}
#f_Jack_email
{ background:white;
float:left;
width:209px;
border: solid 1px black;
margin:0px;
}
#f_Roger_email
{ background:white;
float:left;
width:209px;
border: solid 1px black;
margin:0px;
}
#f_Obadiah_email
{ background:white;
float:left;
width:209px;
border: solid 1px black;
margin:0px;
}
#nest_S {
float:left;
height:159px;
width:730px;
position:relative;
top:150px;
left:15px;
margin:0px;
border: solid 1px #368896;
FONT-FAMILY: papyrus;
text-align:center;
margin-right: auto;
margin-left: auto;
}
Code: Select all
<div id="nest_S">
<div id="f_title_employee">
<p class="bolden_S">
Employee
</p>
<div id="f_joe_employee">
Joe
</div>
<div id="f_jack_employee">
Jack
</div>
<div id="f_roger_employee">
Roger
</div>
<div id="f_Obadiah_employee">
Obadiah
</div>
</div>
<div id="f_title_Monday">
<p class="bolden_S">
Monday
</p>
<div id="f_joe_monday">
8-5
</div>
<div id="f_jack_monday">
8-4
</div>
<div id="f_roger_monday">
8-5
</div>
<div id="f_Obadiah_monday">
8-close
</div>
</div>
<div id="f_title_Tuesday">
<p class="bolden_S">
Tuesday
</p>
<div id="f_joe_tuesday">
8-5
</div>
<div id="f_jack_tuesday">
8-4
</div>
<div id="f_roger_tuesday">
8-5
</div>
<div id="f_Obadiah_tuesday">
8-5
</div>
</div>
<div id="f_title_Wednesday">
<p class="bolden_S">
Wednesday
</p>
<div id="f_joe_Wednesday">
8-5
</div>
<div id="f_jack_Wednesday">
8-4
</div>
<div id="f_roger_Wednesday">
8-5
</div>
<div id="f_Obadiah_Wednesday">
8-close
</div>
</div>
<div id="f_title_thursday">
<p class="bolden_S">
Thursday
</p>
<div id="f_joe_thursday">
8-5
</div>
<div id="f_jack_thursday">
8-4
</div>
<div id="f_roger_thursday">
8-5
</div>
<div id="f_Obadiah_thursday">
8-5
</div>
</div>
<div id="f_title_friday">
<p class="bolden_S">
Friday
</p>
<div id="f_joe_friday">
8-5
</div>
<div id="f_jack_friday">
8-4
</div>
<div id="f_roger_friday">
8-5
</div>
<div id="f_Obadiah_friday">
8-close
</div>
</div>
<div id="f_title_email">
<p class="bolden_S">
E-Mail
</p>
<div id="f_joe_email">
<a class="1" href="mailto:Joe.Nilles@kctcs.edu">Joe.Nilles@kctcs.edu</a>
</div>
<div id="f_jack_email">
<a class="1" href="mailto:Jack.Johnson@kctcs.edu">Jack.Johnson@kctcs.edu</a>
</div>
<div id="f_roger_email">
<a class="1" href="mailto:Roger.Hagley@kctcs.edu">Roger.Hagley@kctcs.edu</a>
</div>
<div id="f_Obadiah_email">
<a class="1" href="mailto:Obadiah_00@hotmail.com">Obadiah_00@hotmail.com</a>
</div>
</div>