Problemas ao criar relatório em html
Pessoal, estou implementando o html para o layout de um relatório esboçado pelo meu colega, porém ao dá iniciativa da implementação, não está idêntico ao que ele desenhou. Alguém poderia me ajudar? Sou iniciante.
Esse é o meu html implementado:
Essa é o layout que meu colega elaborou.
https://www.facebook.com/photo?fbid=1607283452754647&set=gm.2993225587381291
Esse é o meu html implementado:
<style> table { border-collapse: collapse; margin-left: 0; } div.conteudodatabela { overflow: visible; } table > tbody { overflow: visible; } /*adds control for test purposes*/ thead td { font-size: 11pt; } tfoot td { text-align: center; font-size: 9pt; } thead { display: table-header-group; margin-bottom: 10px } tfoot { display: table-footer-group; } thead th, thead td { position: static; } thead tr { position: static; } /*prevent problem if print after scrolling table*/ table tfoot tr { position: static; } /* table */ .checkbox { width: 20px; height: 20px; border: 1px solid black; text-align: center; float: left; margin-right: 10px; font-size: 150%; } .foo { writing-mode: vertical-lr; } .border { border: 1px solid black; } table{ font-weight: 800; font-size: 80%; width: 100%; margin: 10px; margin-bottom: 20px; } .bg{ background: rgb(230,230,230); } .h1{ font-size: 120%; } .center{ text-align: center; } .semi-full-width{ width: 80%; } .row{ margin: 50px; } .p-1{ margin: 30px; margin-bottom: 40px; margin-top: 40px; padding: 8px; } .textovertical{ writing-mode: horizontal-tb; width:11px; word-wrap: break-word; font-family: Arial, Helvetica, sans-serif; white-space: pre-wrap; } tr{ margin: 10px; margin-bottom: 50px; } .m-r{ margin-right: 830px; } .padding_master { padding: 30px; } .conteiner{ font-size: 90%; } .table td{ border: 1px solid black; padding: 1px; margin: 0px; } .lineBottom-inLine{ /* <p> */ border-bottom: 1px solid black; display: inline; } .lineBottom{ /* <p> */ border-bottom: 1px solid black; } .no-border{ border: 0px; } .no-space{ margin: 1px; padding: 1px; } .no-bold{ font-weight: 500; } .space-p p{ margin: 1px; padding: 1px; } .tr-center td{ text-align: center; } .regras p{ margin: 0px; } </style> <style type="text/css" media="print"> @page { size: auto; margin: 0mm; } </style> <div class="table" runat="server" style="margin: 1 auto;"> <div> <table style="padding: 0px; margin: 0px;" class="no-bold"> <tr class="center"> <td class="textovertical">Contratação</td> <td colspan="2">Origem Dívida</td> <td>Credor</td> <td colspan="2">Devedor</td> <td>Credor</td> </tr> <tr class="tr-center"> <td class="textovertical" id="border" rowspan="4" style="width:43px">Direta</td> <td class="textovertical" id="border" colspan="" rowspan="1">Interna</td> <td id="border" colspan="2" rowspan="">teste25</td> <td id="border" colspan="2" rowspan="">teste12</td> <td>teste 1</td> </tr> <tr class="tr-center"> <td id="border" rowspan="1">Externa</td> <td id="border" colspan="2" rowspan="3"> teste20</td> <td id="border" colspan="2" rowspan="">teste40</td> <td>teste 1</td> </tr> </table> </div> <br/> <br/> </div>
Essa é o layout que meu colega elaborou.
https://www.facebook.com/photo?fbid=1607283452754647&set=gm.2993225587381291
Robson Amaral
Curtidas 0
Respostas
Ricardo Arraes
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
GOSTEI 0
Robson Amaral
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
GOSTEI 0
Ricardo Arraes
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso
um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)
GOSTEI 0
Robson Amaral
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso
um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)
Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.
https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing
GOSTEI 0
Ricardo Arraes
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso
um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)
Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.
https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing
fiz a solicitação de acesso, aceita la, por favor
GOSTEI 0
Robson Amaral
16/06/2020
Fala Robson, beleza?
cara, a pagina está indisponível (pelo menos, pra mim está...)
cara, a pagina está indisponível (pelo menos, pra mim está...)
Sabe me informar como eu faço para colocar a imagem aqui para que todos possam visualizar? ou se vc tem algum email que eu possa enviar essa imagem?
você pode usar o google drive ou algum outro site para disponibilizar essa imagem na web.
ai você faz o upload da imagem e posta aqui a url de acesso
um site bom pra isso é:
https://imageshack.us/
(tem trial de 30 dias)
Ricardo. Agora vc consegue visualizar a imagem do layout de como deve ser implementado o html? Eu Já tentei de tudo aqui para deixar igual, mas sou leigo, e iniciante no html, to tentando trabalhar com esse rowspan e cowspan, mas tá complicado de deixar o relatório igual.
https://drive.google.com/file/d/1cgxh2IKu6KcVEMmLEEgorYqBtjpgHNgs/view?usp=sharing
fiz a solicitação de acesso, aceita la, por favor
Opa Ricardo, vlw mano, aceitei lá para vc visualizar a imagem.
GOSTEI 0
Ricardo Arraes
16/06/2020
Cara, pra ser sincero contigo eu tambem nunca fiz esse tipo de tabela tão ramificada, de cabeça não sei como ficaria, mas acredito que olhando a documentação seja facil resolver.
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:
https://www.w3schools.com/html/html_tables.asp
além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:
https://www.w3schools.com/html/html_tables.asp
além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem
GOSTEI 0
Robson Amaral
16/06/2020
Cara, pra ser sincero contigo eu tambem nunca fiz esse tipo de tabela tão ramificada, de cabeça não sei como ficaria, mas acredito que olhando a documentação seja facil resolver.
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:
https://www.w3schools.com/html/html_tables.asp
além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem
Infelizmente não estou com tanto tempo para lhe ajudar a construir mas recomendo que voce verifique a documentação da w3school:
https://www.w3schools.com/html/html_tables.asp
além de boa explicação e bons exemplos, eles oferecem vários exercícios pra voce treinar tambem
Consegui resolver o problema. Muito obrigado!
GOSTEI 0