# How to change font-size for the title of DataTable

**URL:** <https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487>\
**Category:** Community Support\
**Created:** [August 20, 2022, 12:37pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487 "2022-08-20T12:37:39Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![gmerritt123](https://discourse.bokeh.org/user_avatar/discourse.bokeh.org/gmerritt123/32/4101_2.png) [@gmerritt123](https://discourse.bokeh.org/u/gmerritt123)\
**Post date:** [August 24, 2022, 1:12pm UTC](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487/2 "2022-08-24T13:12:20Z")

</div>

This is probably not the slickest solution, but I figured out a while back that you can override the slick-grid table formatting defaults (this is what bokeh relies on) by making a custom template html with additional css styling embedded in it:

```auto
from jinja2 import Template
from bokeh.embed import components
from bokeh.resources import Resources
from bokeh.models import DataTable, TableColumn, ColumnDataSource

#css stuff formatting the slick-header-columns
css_stuff = '''
                <style>
                  .slick-header-columns {
                    background-color: #17648D !important;
                    font-family: arial;
                    font-weight: bold;
                    font-size: 12pt;
                    color: #FFFFFF;
                    }
                </style>
            '''

#from what i can tell (not knowledgeable in this at all)
#, but we need to kinda override bokeh's default "to html" templating with our own that contains these css instructions
tpl = Template('''<!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="utf-8">
                <title>'''+'Here is a title'+'''</title>
                {{ resources }}
                {{ script }}
                '''+css_stuff+'''
            </head>
            <body>
                <div>
                {{ div }}
                </div>
            </body>
        </html>
        ''')

#now make a basic table
src = ColumnDataSource(data={'A':[1,2,3]})

col = TableColumn(title='Column Title',field='A')

tbl = DataTable(columns=[col],source=src)

#and putting it all together...
#break into script and div componenents
script,div = components(tbl)
resources = Resources().render()
html = tpl.render(resources=resources,script=script,div=div)
with open(r'C:\Repo\Proofing\test.html', mode="w", encoding="utf-8") as f:
    f.write(html)

```

![image](https://discourse-uploads.bokeh.org/original/2X/5/5e8caca8da4d3afc9f64edc62efa66c6279ae382.png)

This honestly just took me a lot of trial and error and my understanding on how it actually works is quite shaky. A relevant thread is here too → [Including CSS Classes for DataTable](https://discourse.bokeh.org/t/including-css-classes-for-datatable/9055)

Hopefully this helps!

---

_[View the full topic](https://discourse.bokeh.org/t/how-to-change-font-size-for-the-title-of-datatable/9487)._