html - How do I style a table like a notepad? -


I would like to create CSS / HTML version of this notepad on my page:

I was thinking of using a simple table like this: 

  & lt; Div id = "notepad" & gt; & Lt; Table & gt; & Lt; Thead id = "tbl_header" & gt; Comments & lt; / Thead & gt; & Lt; TR & gt; & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td square = "call1" & gt; Dot & lt; / Td> & Lt; Td class = "col2" & gt; Text for column 2 & lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td square = "call1" & gt; & Lt; / Td> & Lt; Td square = "call 2" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td square = "call1" & gt; & Lt; / Td> & Lt; Td square = "call 2" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td square = "call1" & gt; & Lt; / Td> & Lt; Td square = "call 2" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; TR & gt; & Lt; Td square = "call1" & gt; & Lt; / Td> & Lt; Td square = "call 2" & gt; & Lt; / Td> & Lt; Td square = "call3" & gt; & Lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;

So what I was thinking was cutting the graphic in the top part, and lt; Thead & gt; For BG-IMG, be it. Then create just one line in the form of rows (there will be two graphics, one will be for call 1 and call 2 - so when a new line is created then both columns will become BG), so that it can make it necessary. Then, for the final set, I have two more graphics, one is for col1 one for call 2 (which is a regular line but slightly narrow in width) and curl will be 3.

Can I do this by using CSS and embection? Only HTML (no JS or jQuery)?

Thank you.

P. s. Or is there another way to do the same thing without using BG images - and just use CSS?

The use of tables is probably not correct (I believe your "Notepad" tabular Not filled with data); Instead, a simple HTML and LT; Section & gt; can be sufficient: 

  & lt; Section square = "notepad" & gt; & Lt; Header & gt; & Lt; H1 & gt; No comment & lt; / H1> & Lt; / Header & gt; & Lt ;! - Your Text Here - & gt; & Lt; Footer & gt; & Nbsp; & Lt; / Footer & gt; & Lt; / Section & gt;

With the appropriate CSS, it is easily styled to be a "Notepad": 

  .notepad, .notepad & gt; * {Margin: 0; Padding: 0; Overflow: Auto; }. Notepad {background: url ('middle-part.png'); }. Notepad Header {background: URL ('top-part page'); }. Notepad footer {background: url ('curl-part.png'); float right; / * Also set a correct size * /}

unchecked; There may be some tweaking requirement, be sure to just set the line-height properly, so that the text line does not overlap the line if you use HTML4 (or XHTML, ) If you are using HTML 5 specific elements, then and

gt; replace with s


Comments

Post a Comment