Taulukko on erinomainen tapa esittää paljon tietoa järjestelmällisesti. Myyntitiedot, verkkosivujen liikenne, osakemarkkinoiden trendit ja opiskelijoiden arvosanat ovat esimerkkejä tiedoista, jotka esitetään usein taulukoissa.
Kun lisäät taulukon verkkosivulle HTML-koodilla, saattaa olla visuaalisesti houkuttelevampaa keskittää se sivulle. Tekstin ja kuvien keskitys tapahtuu yleensä tekstitasausluokan tai CSS:n kautta, mutta taulukon keskitys vaatii erilaista lähestymistapaa. Alla on lisätietoja taulukon keskittämisestä verkkosivulle.
Taulukon keskittäminen HTML-kielellä
Kun lisäät taulukon verkkosivulle, se tasataan oletusarvoisesti sivun tai säilön vasempaan reunaan alla olevan kuvan mukaisesti.
| HITS |
KUUKAUSI |
KOKONAISKASVU |
| 324 497 |
tammikuuta 1998 |
– |
| 436 699 |
Helmikuu 1998 |
112,172 |
Yllä olevan taulukon HTML-lähdekoodi on seuraava.
<table style="border:1px solid black">
<tr>
<td><b>HITS</b></td>
<td><b>MONTH</b></td>
<td><b>TOTAL INCREASE</b></td>
</tr>
<tr>
<td>324,497</td>
<td>January 1998 </td>
<td style="text-align:center">-</td>
</tr>
<tr>
<td>436,699</td>
<td>February 1998</td>
<td style="text-align:center">112,172</td>
</tr>
</table>
Keskittääksesi tämän taulukon, sinun on lisättävä ;margin-left:auto;margin-right:auto;
-tunnisteen style-attribuutin loppuun. Taulukon tunniste näyttää seuraavalta.
<table style="border:1px solid black;margin-left:auto;margin-right:auto;">
-tunnisteen style-attribuutin muuttaminen yllä olevan kuvan mukaisesti johtaa siihen, että taulukko keskitetään verkkosivulle alla olevan kuvan mukaisesti.
| HITS |
KUUKAUSI |
KOKONAISKASVU |
| 324 497 |
tammikuuta 1998 |
– |
| 436 699 |
Helmikuu 1998 |
112,172 |
Kärki
Voit lisätä
-tunnisteen style-attribuutille parametreja, jotta taulukosta tulee houkuttelevampi. Täytön lisääminen:2px; ja reunaväli: 20px; lisää tietopisteiden ja reunuksen väliin luettavuuden parantamiseksi.
Stay on op - Ge the daily news in your inbox
[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]
