What's new
By:

❓ Help Personal Data Sheet Revised 2017

L

LyricCy

Leecher
Hello po. Ive been starting a coding journey sa web development. Im still a newbie. Gusto ko sanang itry na gawin yung input and output ng Personal Data Sheet revised 2017 using xxamp database. pero during the coding eh namomoblema ako sa heights ang cells sa rows. hindi nagagawa yung gusto kong mangyare para sana magaya ang hitsura ng PDS. Baka po may nakagawa na sa inyo na pwedeng pag-aralan ang code. Maraming salamat po. its been 6 months ko na pong tinatrabaho ito.

Code so far:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bond Paper Layout</title>
<!-- Bootstrap CSS -->
<link href="You do not have permission to view the full content of this post. Log in or register now." rel="stylesheet">
<style>
/* Define the bond paper size */
.bond-paper {
width: 8.5in;
height: 13in;
margin: 10px auto;
padding: 10px;
border: 1px solid #000;
page-break-after: always;
}

/* Define the table inside the bond paper */
.bond-paper-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}

.bond-paper-table th, .bond-paper-table td {
border: 1px solid #000;
text-align: center;
padding: 5px;
}

/* Set the height of each thead row to 2.25mm */
.bond-paper-table thead tr {
height: 2.25mm;
}

/* Define the column widths */
.col-1 { width: 1.71mm; }
.col-2 { width: 12.86mm; }
.col-3 { width: 4.86mm; }
.col-4 { width: 10.87mm; }
.col-5 { width: 5.57mm; }
.col-6 { width: 4.57mm; }
.col-7 { width: 7.86mm; }
.col-8 { width: 9.29mm; }
.col-9 { width: 7.14mm; }
.col-10 { width: 10.29mm; }
.col-11 { width: 7.29mm; }
.col-12 { width: 7.43mm; }
.col-13 { width: 8.71mm; }
.col-14 { width: 7.57mm; }

/* Individual styling for each header row */
.header-row-1 {
font-family: 'Calibri', sans-serif;
font-size: 11pt;
font-weight: bold;
font-style: italic;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 1;
border-bottom: none; /* Ensure there is no bottom border */
}

.header-row-2 {
font-family: 'Calibri', sans-serif;
font-size: 9pt;
font-weight: bold;
font-style: italic;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 0;
border-top: none; /* Ensure there is no top border */
}

.header-row-3 {
font-family: Arial Black, sans-serif;
font-size: 22pt;
font-weight: bold;
color: #000;
text-align: top !important;
border: none;
padding: 0;
line-height: 0.5;
}

.header-row-4 {
font-family: Arial Black, sans-serif;
font-size: 22pt;
font-weight: bold;
color: #fff;
text-align: top !important;
border: none;
padding: 0;
line-height: 0.5;
}

.header-row-5 {
font-family: 'Arial', sans-serif;
font-size: 8pt;
font-weight: bold;
font-style: italic;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 1;
text-align: justify;
}

.header-row-6 {
font-family: 'Arial', sans-serif;
font-size: 8pt;
font-weight: bold;
font-style: italic;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 0.5;
border-bottom: none; /* Ensure there is no bottom border */
text-align: justify;
}
.header-row-7 {
font-family: 'Arial Narrow', sans-serif;
font-size: 9pt;
font-weight: normal;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 0.5;
border-bottom: none; /* Ensure there is no bottom border */
text-align: justify;
}
.header-row-8 {
font-family: 'Arial Narrow', sans-serif;
font-size: 0.1pt; /* Extremely small font size */
font-weight: normal;
color: #000;
text-align: left !important;
border: none; /* Remove all borders */
padding: 0;
line-height: 0; /* Remove line height to minimize space */
height: 0; /* Set height to 0 to make it as small as possible */
border-bottom: none; /* Ensure there is no bottom border */
}

</style>
</head>
<body>

<!-- Bond Paper Content - Page 1 -->
<div class="bond-paper">
<table class="bond-paper-table">
<thead>
<!-- 6 Rows in the header, each merged into one cell across all 14 columns -->
<tr>
<th colspan="14" class="header-row-1" style="text-align: left; border-bottom: none;">CS Form No. 212</th>
</tr>
<tr>
<th colspan="14" class="header-row-2" style="border-top: none; border-bottom: none;">Revised 2017</th>
</tr>
<tr>
<th colspan="14" class="header-row-3" style="border-top: none; border-bottom: none;">PERSONAL DATA SHEET</th>
</tr>
<tr>
<th colspan="14" class="header-row-4" style="border-top: none; border-bottom: none;">JUST BLANK</th><!--Just Blank-->
</tr>
<tr>
<th colspan="14" class="header-row-5" style="border-top: none; border-bottom: none;">WARNING: Any misrepresentation made in the Personal Data Sheet and the Work Experience Sheet shall cause the filing of administrative/criminal case/s against the person concerned.</th>
</tr>
<tr>
<th colspan="14" class="header-row-6" style="border-top: none; border-bottom: none;">READ THE ATTACHED GUIDE TO FILLING OUT THE PERSONAL DATA SHEET (PDS) BEFORE ACCOMPLISHING THE PDS FORM.</th>
</tr>
<tr>
<th colspan="10" class="header-row-7" style="font-size: 8.5pt; border-top: none;">
Print legibly. Tick appropriate boxes (☐) and use separate sheet if necessary. Indicate N/A if not applicable.
<b>DO NOT ABBREVIATE</b>.
</th>
<th class="header-row-7" style="font-size: 8pt; background-color: #989494; font-family: 'Arial Narrow', sans-serif; text-align: center; padding: 0; margin: 0; width: auto;">
1. CS ID No.
</th>
<th colspan="3" class="header-row-7" style="font-size: 8pt; font-family: 'Arial Narrow', sans-serif; text-align: right; padding: 0; margin: 0;">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
(Do not fill up. For CSC use only)
</th>
</tr>
<tr>
<th colspan="14" class="header-row-8" style="border-top: none; border-bottom: none;">Bengga</th>
</tr>
</thead>
<tbody>
<!-- Generate 19 more rows for Page 1 -->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- Repeat rows for 19 total rows -->
<!-- You can copy-paste the row above to fill in the rest or generate dynamically -->
</tbody>
</table>
</div>

<!-- Additional Pages Placeholder -->
<div class="bond-paper">
<p>Page 2 content here...</p>
</div>
<div class="bond-paper">
<p>Page 3 content here...</p>
</div>
<div class="bond-paper">
<p>Page 4 content here...</p>
</div>
<div class="bond-paper">
<p>Page 5 content here...</p>
</div>

<!-- Bootstrap JS and Popper -->
<script src="You do not have permission to view the full content of this post. Log in or register now."></script>
</body>
</html>
 
Sort by date Sort by votes
Sa iyong code, mukhang maayos na na-define mo na ang layout ng bond paper at ang header ng Personal Data Sheet (PDS). Ang mga problema sa pagkakalagay ng mga cells sa rows ay maaaring maiayos sa pamamagitan ng pagtukoy ng tamang height para sa mga rows na nais mo.

Upang mapag-aralan ng mas maigi ang pagtukoy ng heights ng cells sa rows, maaari mong subukan ang mga sumusunod:

1. Siguruhing tama ang height na inilalagay mo sa bawat row. Maaari mong i-adjust ang height base sa iyong pagpapadala.
2. Subukan mong i-set ang height gamit ang mga fixed values o baka kailangan mong i-compute base sa iyong layout.
3. Maaari mo ring subukan ang paggamit ng iba't ibang units para sa height tulad ng pixels, millimeters, o porsyento depende sa iyong pangangailangan.

Maaari mo ring subukan ang mga sumusunod para mas mapadali ang pag-debug at pag-test ng iyong code:
  • I-comment out ang ibang rows at subukan lang ang iilang rows sa table para mas madaling makita ang resulta.
  • Gamitin ang developer tools ng browser para mas mabilis na makita ang mga pagbabago sa layout.

Kung nais mong pag-aralan ang iba't ibang halimbawa ng code para sa PDS gamit ang database, maaari kang maghanap online ng mga sample projects o tutorials na nagtatampok ng input at output ng Personal Data Sheet gamit ang xxamp database. Maaaring makatulong din ang pag-aaral ng mga tutorials sa web development platforms tulad ng W3Schools, MDN Web Docs, at iba pa.

Kung may iba kang mga tanong o kailangan ng karagdagang tulong sa iyong coding journey, huwag kang mag-atubiling magtanong dito sa forum. Good luck sa iyong pag-aaral sa web development!
 
Upvote 0 Downvote

Similar threads

About this Thread

  • 1
    Replies
  • 461
    Views
  • 1
    Participants
Last reply from:
Unknown user

New Topics

Trending Topics

Online now

Members online
1,236
Guests online
3,311
Total visitors
4,547

Forum statistics

Threads
2,271,045
Posts
28,939,020
Members
1,240,145
Latest member
cartographer
Back
Top