Customizing table style¶
CSS¶
In order to use CSS to style a table, you’ll probably want to add a
class
or id
attribute to the <table>
element. django-tables2 has
a hook that allows arbitrary attributes to be added to the <table>
tag.
>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
... id = tables.Column()
... age = tables.Column()
...
... class Meta:
... attrs = {'class': 'mytable'}
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<table class="mytable">...'
Also every column gets a class attribute, which by default is the same as the
column’s label. Also, by default, odd rows’ class is odd
and even rows’
class is even
. So rows of the SimpleTable()
from previous example
in django-tables2 default configuration will look like:
<tr class="odd">
<td class="id">...</td>
<td class="age">...</td>
</tr>
<tr class="even">
<td class="id">...</td>
<td class="age">...</td>
</tr>
You can also specify attrs
attribute when creating a column. attrs
is a dictionary which contains attributes which by default get rendered
on various tags involved with rendering a column. You can read more about
them in Column and row attributes. django-tables2 supports 3 different
dictionaries, this way you can give different attributes
to column tags in table header (th
), rows (td
) or footer (tf
)
>>> import django_tables2 as tables
>>>
>>> class SimpleTable(tables.Table):
... id = tables.Column(attrs={'td': {'class': 'my-class'}})
... age = tables.Column(attrs={'tf': {'bgcolor': 'red'}})
...
>>> table = SimpleTable()
>>> # renders to something like this:
'<tbody><tr><td class="my-class">...</td></tr>'
>>> # and the footer will look like this:
'<tfoot><tr> ... <td class="age" bgcolor="red"></tr></tfoot>''
Custom Template¶
And of course if you want full control over the way the table is rendered,
ignore the built-in generation tools, and instead pass an instance of your
Table
subclass into your own template, and render it yourself.
Have a look at the django_tables2/table.html
template for an example.
You can set DJANGO_TABLES2_TEMPLATE
in your django settings to change the
default template django-tables2 looks for.