Set table row content using CSS? - html

Question

Can I somehow turn:
<!-- top blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
into something more like:
<tr class="blueline"></tr>
and the CSS will take care of inserting all the <td>s?
If there's a logical and simple way of doing this in ASP.NET/C# where I keep the formatting in one central location I would be open to hearing it but I'd prefer to just use CSS if at all possible.
EDIT:
Based on the answers and comments I'll just post what I have for the nested tables which I like the look of and I guess if its best to use just go about it a totally different way that's fine; and as far as using a web control that might be the best idea but I'm not sure how to use a web control and then actually be able to put different content into sections of the web control as if it was a static html table. I need to be able to edit the middle section for the column names, textboxes, and datatypes.
Code:
<table width="362" border="0" cellspacing="0" cellpadding="0">
<!-- top blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
<!-- top white space -->
<tr>
<td width="120" valign="top" height="10"></td>
<td width="1" height="10"></td>
<td width="120" valign="top" height="10"></td>
<td width="1" height="10"></td>
<td width="120" valign="top" height="10"></td>
</tr>
<!-- middle row / content -->
<tr>
<!-- Labels for columns go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
ColumnNames
</font></font></b></font></p>
<!-- put labels in here -->
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
cell_id<br />
cell_description<br />
cell_name
</font></font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63" height="1"></td>
<!-- textboxes go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#000063">
Textboxes
</font></b></font></p>
<!-- put textboxes in here -->
<p><font size="1" face="Verdana, Arial, Helvetica, sans-serif">
<asp:TextBox ID="TextBox6" runat="server" Width="100px"></asp:TextBox><br />
<asp:TextBox ID="TextBox7" runat="server" Width="100px"></asp:TextBox><br />
<asp:TextBox ID="TextBox8" runat="server" Width="100px"></asp:TextBox>
</font></p>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="#FFCF63" height="1"></td>
<!-- datatypes for columns go inside this td -->
<td width="120" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr valign="top">
<td>
<p align="left"><font color="#FFFFFF"><b><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font color="#000063">
Data Types
</font></font></b></font></p>
<!-- put datatype descriptions [varchar(50),int,etc] in here -->
<p align="left"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><font face="Verdana, Arial, Helvetica, sans-serif" size="1">
INT<br />
VARCHAR(50)<br />
VARCHAR(10)
</font></font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- bottom white space -->
<tr>
<td height="10"></td>
<td height="10" width="1"></td>
<td height="10"></td>
<td height="10" width="1"></td>
<td height="10"></td>
</tr>
<!-- bottom blue line -->
<tr bgcolor="#000066">
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
<td width="1" height="1"></td>
<td width="120" valign="top" height="1"></td>
</tr>
</table>

Answer 1

I would suggest writing a single javascript function for this and that function can be invoked on any page that you desire. This will reduce the need to write redundant code everywhere and make updates easier.

Answer 2

The CSS will apply to every page that references the css file unless it is specifically overridden in that page. You would move all your styling to the css file and basically have as little as possible in the table layout. Keep in mind that tables are best used for tabular data like reports. If you are using nested tables to handle positioning then this can be better accomplished through css and div tags.

Answer 3

CSS can't add td's into a tr so you won't be able to take that approach. You could use jquery/javascript to implement this but if you can use asp/c# there is something called a web user control that can hold html and you just have to put one line of code on your actual page to pump in the table.

Answer 4

For this particular example, it sounds like a top border on either the table or the first non-header row would be perfect. Assuming a table somewhat like:
<table>
<thead>
<tr>
<th>Some Column</th>
<th>Some Other Column</th>
</tr>
</thead>
<tbody>
<!-- rows go here -->
</tbody>
</table>
, you could just use a quick:
tbody tr:first-of-type {
border-top: 1px solid blue;
}

Answer 5

CSS Can't do what you have described.
However, if you refactor your markup to use tables correctly, what you want is pretty simple. Nested tables are very rarely warranted.
/*Set Basic font styles for table*/
#data {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
/*Provides the border and spacing*/
padding: 20px 0;
border-top: 1px solid #006;
border-bottom: 1px solid #006;
}
/*Give the table headers a bit of color*/
#data th {
color: #000063;
text-align: left;
font-size: 13px;
}
/*set the width of our cells*/
#data th,
#data td {
width: 120px;
}
/*Add some right padding to the first colum*/
#data tr>th:first-of-type,
#data tr>td:first-of-type {
width: 114px;
padding-right: 6px;
}
/*Add some left padding to th last colum*/
#data tr>th:last-of-type,
#data tr>td:last-of-type {
width: 114px;
padding-left: 6px;
}
/*Set the input width*/
#data input[type="text"] {
width: 100px;
}
<table border="0" cellspacing="0" cellpadding="0" id="data">
<thead>
<tr>
<th>Column Names</th>
<th>Textboxes</th>
<th>Data Types</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell_id</td>
<!-- Replace input tags with your asp:textbox control -->
<td><input type="text" /></td>
<td>INT</td>
</tr>
<tr>
<td>cell_description</td>
<td><input type="text" /></td>
<td>VARCHAR(50)</td>
</tr>
<tr>
<td>cell_description</td>
<td><input type="text" /></td>
<td>VARCHAR(10)</td>
</tr>
</tbody>
</table>