C# – Giving Borders to the dynamically added HTML table

chtmlstylesheet

I have a HTML table added dynamically in my Code behind.

I am able to give the entire table a border.

How can I do this for each row? I want to add a border under each row.

How can I add a hyperlink to cells at runtime?

What I have tried is

tdr.Width = "100px";
tdr.Attributes.Add("class", "float-left");

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = doc;
row.Cells.Add(cell);
tdr.Rows.Add(row);

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = "No Timming";
row.Cells.Add(cell);
tdr.Rows.Add(row);

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = weekday[i];
row.Cells.Add(cell);
tdr.Rows.Add(row);

And my CSS:

<style type="text/css">
    .float-left
    {
        float:left;
        border-style:solid;
        border-width:2px;
        border-color:Black;
    }
</style>

Best Answer

For the first part of your question, you can add the borders without changing your markup generation by adding a simple css rule:

tr {
  border-bottom: solid 1px black;
}

There is an overview about styling tables in general via both about.com and w3c schools

Note that you'll also need to set the border-collapse: collapse; css attribute on the table.

I've put an example jsFiddle up for you.

You can place the CSS rule in your CSS section (note I've also added the border-collapse):

<style type="text/css">

    tr {
      border-bottom: solid 1px black;
    } 

    .float-left{
        float:left;
        border-style:solid;
        border-width:2px;
        border-color:Black;
        border-collapse: collapse;
    }

</style>

You could also consider removing the float-left css attribute and just change .float-left to be table to further simplify your code.

For the second part of your question:

and add a hyperlink to each of the values in the table at run time

You can simply use the HtmlAnchorClass.

In effect, a simple example is:

HtmlAnchor htmlanchor = new HtmlAnchor();
htmlanchor.HRef = "http://www.linkurl.com";
htmlanchor.InnerText = "My Link Text";
//Add it to a cell
cell.Controls.Add(htmlanchor);

This will add a hyperlink to your cell.

You may also want to consider using the ASP Repeater Control or the DataGrid control as each of these give you the option to template your markup.

Related Solutions

Html – What are valid values for the id attribute in HTML

For HTML 4, the answer is technically:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

HTML 5 is even more permissive, saying only that an id must contain at least one character and may not contain any space characters.

The id attribute is case sensitive in XHTML.

As a purely practical matter, you may want to avoid certain characters. Periods, colons and '#' have special meaning in CSS selectors, so you will have to escape those characters using a backslash in CSS or a double backslash in a selector string passed to jQuery. Think about how often you will have to escape a character in your stylesheets or code before you go crazy with periods and colons in ids.

For example, the HTML declaration <div id="first.name"></div> is valid. You can select that element in CSS as #first\.name and in jQuery like so: $('#first\\.name'). But if you forget the backslash, $('#first.name'), you will have a perfectly valid selector looking for an element with id first and also having class name. This is a bug that is easy to overlook. You might be happier in the long run choosing the id first-name (a hyphen rather than a period), instead.

You can simplify your development tasks by strictly sticking to a naming convention. For example, if you limit yourself entirely to lower-case characters and always separate words with either hyphens or underscores (but not both, pick one and never use the other), then you have an easy-to-remember pattern. You will never wonder "was it firstName or FirstName?" because you will always know that you should type first_name. Prefer camel case? Then limit yourself to that, no hyphens or underscores, and always, consistently use either upper-case or lower-case for the first character, don't mix them.

A now very obscure problem was that at least one browser, Netscape 6, incorrectly treated id attribute values as case-sensitive. That meant that if you had typed id="firstName" in your HTML (lower-case 'f') and #FirstName { color: red } in your CSS (upper-case 'F'), that buggy browser would have failed to set the element's color to red. At the time of this edit, April 2015, I hope you aren't being asked to support Netscape 6. Consider this a historical footnote.

Javascript – Retrieve the position (X,Y) of an HTML element

The correct approach is to use element.getBoundingClientRect():

var rect = element.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

Internet Explorer has supported this since as long as you are likely to care about and it was finally standardized in CSSOM Views. All other browsers adopted it a long time ago.

Some browsers also return height and width properties, though this is non-standard. If you're worried about older browser compatibility, check this answer's revisions for an optimised degrading implementation.

The values returned by element.getBoundingClientRect() are relative to the viewport. If you need it relative to another element, simply subtract one rectangle from the other:

var bodyRect = document.body.getBoundingClientRect(),
    elemRect = element.getBoundingClientRect(),
    offset   = elemRect.top - bodyRect.top;

alert('Element is ' + offset + ' vertical pixels from <body>');

Best Answer

Related Solutions

Html – What are valid values for the id attribute in HTML

Javascript – Retrieve the position (X,Y) of an HTML element

Related Topic