Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to format html table with inline styles to look like a rendered Excel table?

I'm currently stuck setting borders in an html table. (I use inline styles for a better rendering in e-mail-clients) I have this piece of code:

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>

It is rendered like this: alt text

I want the table to be rendered like Excel would render a table, with inner and outer border: alt text

like image 803
citronas Avatar asked Sep 08 '10 09:09

citronas


People also ask

How do you add an inline table style in HTML?

CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.

How do you add a style to HTML table Power automate?

Power Automate generates HTML code that can be easily modified or styled with help of CSS. Add a compose action as next step to Create HTML table action and enter below CSS to the compose action. Here is the formatted table and we can customize our html table / html code as per easy to complex requirements.

What is the format of an inline style sheet?

Inline style sheets is a term that refers to style sheet information being applied to the current element. By this, I mean that instead of defining the style once, then applying the style against all instances of an element (say the <p> tag), you only apply the style to the instance you want the style to apply to.


2 Answers

table {   border-collapse:collapse; } 
like image 64
Stephan Muller Avatar answered Sep 23 '22 18:09

Stephan Muller


This is quick-and-dirty (and not formally valid HTML5), but it seems to work -- and it is inline as per the question:

<table border='1' style='border-collapse:collapse'>

No further styling of <tr>/<td> tags is required (for a basic table grid).

like image 30
Brent Bradburn Avatar answered Sep 21 '22 18:09

Brent Bradburn